I have a row of divs that must all be the same height, but I have no way of knowing what that height might be ahead of time (the content comes from an external source). I initially tried placing the divs in an enclosing div and floated them
left. I then set their height
to be "100%", but this had no perceptible effect. By setting the height on the enclosing div
to a fixed-height I could then get the floated divs
to expand, but only up
to the fixed height of the container. When the content in one of the divs exceeded the fixed height, it spilled over; the floated divs refused
to expand.
I Googled this floated-divs-of-the-same-height problem and apparently there's no way
to do it using CSS. So now I am trying
to use a combination of relative and absolute positioning instead of floats. This is the CSS:
<style type="text/css">
div.container {
background: #ccc;
position: relative;
min-height: 10em;
}
div.a {
background-color: #aaa;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 40%;
}
div.b {
background-color: #bbb;
position: absolute;
top: 0px;
left: 41%;
bottom: 0px;
width: 40%;
}
</style>
This is a simplified version of the HTML:
<div class="container">
<div class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
<div class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
</div>
This works, unless you change the min-height
to something like 5em (demonstranting what happens when the content exceeds the minimum height), and you can see that while the text doesn't get cutoff, the divs still refuse
to expand. Now I am at a lose. Is there any way
to do this using CSS?
