A little while ago I posted about the need to mix units in a height property. For the moment I have a rather inelegant workaround for my problem, but here’s what I’m trying to do, and would dearly like to do it ‘properly’:
<div id=“a” style=“position:relative”>
[INDENT]<div class=“b” style=“position:absolute; top:0; left:0”>
[INDENT]<div id=“c”>
</div>
[/INDENT]</div>
<div class=“b” style=“position:absolute; top:0; left:0”>
[INDENT]<div id=“d”>
</div>
[/INDENT]</div>
[/INDENT]</div>
Div a is the containing div, sitting in the flow of the page as normal; the two divs with class b are both pinned to the same spot, one on top of the other inside div a, alternately fading in and out to create a slide show. The divs inside those, c and d, are each regenerated by Ajax while they’re invisible. They’re fairly complex, containing a row of three floated divs, each of which in turn contains an image and various further divs containing text and links.
The text in the inner divs can vary in length, thus giving the inner divs varying heights, and my problem is that - mainly due to pure rustiness on my part - I can’t find a way for div a to have a real height (without my imposing an abitrary height on it). Because of the b divs having absolute positioning, div a has no height, so the stuff that should follow all this on the page overlays it.
If my explanation above isn’t clear enough, you can see what I’ve done with a compromise solution something like the one suggested by Paul O’B in answer to my previous query here - but try zooming in a few times (set to zoom text only) and you start running into trouble. There’s another minor side-effect I’d like to get rid of, but I won’t go into that here because I’m pretty sure if I could solve this box model issue it would cure that too.