Hello~

I have a fairly complicated web site that I am updating from tables to CSS. The entire system is dynamic, which makes it even more complicated! Right now, I am trying to make several floated divs fill up their parent container. The content of the first div will always be longer than the others, so I would like the container div to be the same height as the first div inside of it. The trick is, none of the heights can be fixed-- it is all completely dynamic. This is (sort of) what the code looks like right now:

.subTabSection {
border-bottom:1px dashed #89959b;
background-color:#f7f7f7;
}

<div class="subTabSection">
<div></div>
<div></div>
<div></div>
</div>

The inner divs are floated dynamically according to their contents (all through ColdFusion and a DB). The width is not a problem, I have that figured out. The individual divs do have classes, but those are determined dynamically as well, and mostly just have to do with background color, etc.

The main problem I am having is that the subTabSection div is not expanding at all, and the inner divs seem to be floating on top of it, rather than within it.

Unfortunately, this is all in development, so I can't provide a URL, but if someone lets me know how to post an image, I could include a screenshot. Thanks for any suggestions!

No, unfortunately it is all still in development on local servers. I was able to make the main div fill the container by using overflow:auto, but the smaller divs only take up as much space as their content does.

Hello kcvanhout,

Will subTabSection be floated at all? I would try to clear that container and use the clear:after method.

.clear{
clear:both;
}
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}