The forums have permanently moved to This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.

Results 1 to 5 of 5

Thread: Flexible height of Divs?

  1. #1

    Flexible height of Divs?

    I have this markup...
    HTML Code:
    <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 id="sideNavBottom" class="sidenavDivs"></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?

  2. #2
    anyone? please?

  3. #3
    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? - My New Portfolio - The Blog Gallery

  4. #4


    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?

  5. #5
    OK - found the solution.
    HTML Code:
    <div id="sideNavMain" class="sidenavDivs">
    	<div id="sideNavMainLeft"></div>
    	<div id="sideNavMainContent"></div>
    	<div id="sideNavMainRight"></div>
    	[B]<div class="clearer"></div>[/B]
    then on the "clearer" class
    HTML Code:
    .clearer {clear: both; line-height: 0; height: 0;}
    thanks to

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Home About Meet the Moderators Advertise

 Link to Us


Copyright 1999 - 2012