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?
