Flexible height of Divs?

[matthewjumps]

I have this markup...

<div id="sideNav">
        <div id="sideNavTop" class="sidenavDivs"></div>
        <div id="sideNavMain" class="sidenavDivs">
            <div id="sideNavMainLeft"></div>
            <div id="sideNavMainContent"></div>
            <div id="sideNavMainRight"></div>
        </div>
        <div id="sideNavBottom" class="sidenavDivs"></div>
</div>

sideNavTop and sideNavBottom just have widths and heights set, with a background image.

sideNavMain has three divs inside it, all of them floated left, and it also has a repeat-y background image. sideNavMainLeft has a width and height set, and a no-repeat image, as with sideNavMainRight. If the parent div, sideNavMain, expands vertically, i dont want the sideNavMainLeft and sideNavMainRight images to tile down the page.

sideNavMainContent is where the actual content will go (duh ), but i am trying to make it so that whatever amount of content there is in sideNavMainContent, its parent div, sideNavMain, will expand to the same height, thus tiling its background image down the page as far as the content inside its child div.

Currently i am explicitly setting the heights of sideNavMain and its child sideNavMainContent. If i remove the height declarations, divs seem to collapse/dissappear.

How do i make this flexible?

[matthewjumps]

anyone? please?

[Theros]

Holy cow... matthew first treat your divititis... Why do you need 4 divs for the main part? Is this a 3 column site? Just use a left div, middle div, and a right div, no need for the wrapper unless you need it for a sticky footer or something... Can you give us a link?

[matthewjumps]

divititis

yea...

http://i-com.com.au/wip/test.htm

the part in question is the "Products" side nav. the reason i have so many divs is I have lots of gradients, the sideNavMain has a vertically tiling background, that really only becomes visible if i have content in the sideNavMainContent that extends beyond 364px. the three divs inside the sideNavMain all have vertical gradients, the left and right ones are just the silvery edges, the sideNavMainContent is a horizontally tiled vertical gradient.

i am doing it this way so it can have nice gradients, but if the content extends beyond the no-repeat background image in the sideNavMainContent, the vertically tiled background image will continue down the page.

oh btw other css is a mess - ignore it its wip....

basically what i want to know is - if i have a div inside another div, and the child div gets filled with tons of content, how do i make the parent div expand vertically down the page with its child?

[matthewjumps]

OK - found the solution.

<div id="sideNavMain" class="sidenavDivs">
	<div id="sideNavMainLeft"></div>
	<div id="sideNavMainContent"></div>
	<div id="sideNavMainRight"></div>
	[B]<div class="clearer"></div>[/B]
</div>

then on the "clearer" class

.clearer {clear: both; line-height: 0; height: 0;}

thanks to http://www.complexspiral.com/publica...aining-floats/