I'm facing a challenge that seems insurmountable at the moment.
Picture this: there's a container block with fixed height and width. Inside it, two blocks reside - one orange and one blue.
The goal is for the orange block to adjust its height based on the height of the blue block. The blue block sits at the bottom of the container block using absolute positioning.
How can I achieve this using only CSS? (and minimal HTML)
Check out this little demo showcasing my issue: http://jsfiddle.net/uK64u/2/
Here's one of several attempts:
HTML:
<div id="container">
<div id="orange"></div>
<div id="blue">Lorem ipsum dolor sit amet.</div>
</div>
CSS:
#container
{
width: 400px;
height: 700px;
}
#orange
{
position: absolute;
height: 100%;
}
#blue
{
position: absolute;
height: auto;
bottom: 0;
}
This attempt falls short as the blue block overlaps the orange one instead of adjusting its height.