Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

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>
            <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?

  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?
    EricHuangis.com - My New Portfolio
    SmallBlogsNetwork.com - The Blog Gallery

  4. #4
    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?

  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]
    </div>
    then on the "clearer" class
    HTML Code:
    .clearer {clear: both; line-height: 0; height: 0;}
    thanks to http://www.complexspiral.com/publica...aining-floats/

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 kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012