Flexible height of Divs?

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 :sigh:), 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? :be: