Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child.
I am struggling to achieve this layout using CSS while keeping my markup simple.
Sample HTML:
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
Sample CSS:
.container {
display: inline-block;
margin: 10px 0;
}
.left {
float: left;
width: 60px;
background-color: #999;
}
.right {
float: left;
width: 540px;
border: 4px solid #666;
padding: 8px;
}