Add
vertical-align:top
to your
inline-block
elements.
html,
body {
background-color: skyblue;
}
.wrapper-details-page > div {
border: 1px solid black;
min-height: 600px;
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
}
.wrapper-details-page-left {
width: 19%;
}
.wrapper-details-page-middle {
width: 38%;
background-color: pink;
}
.wrapper-details-page-right {
width: 40%;
}
Updated demo[
^]
For modern browsers, you might want to consider using Flexbox for the layout:
@supports (display:flex){
.wrapper-details-page {
display: flex;
}
.wrapper-details-page > div:last-child {
flex-grow: 1;
}
}
Demo with Flexbox[
^]
Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid — Smashing Magazine[
^]