SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested divs and the height issue

    hey all, first time poster here...

    Ok, can anyone shed some light on the height: 100%; problems i am having with nested divs? I have div called "container" on my page. Inside that div are two other divs "text" and "sidebar". The div "text" will have a variable amount of text in it depending on the page. The height of this div is set to auto as is the height of the div "container". What I want is for the div "sidebar", which will not have much content in it, to always be as tall as the div "container". I have tried setting the height of the "sidebar" div to 100% but that would make too much sense that it work.... Can anyone shed some light on this problem? Thanks

    The file lives here:

    http://dana.ucc.nau.edu/~bjk25/test/csa_02_22.html

    Oh, a few more things: I work on a mac but do not have access to a pc. can anyone tell me if any of this site breaks in the pc world. Also, anyone have any thoughts or insight into using divs nested in divs? Should it be avoided as much as possible when trying to make a site validate? Thanks

    Ben

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to read the FAQ on 100% as it is a complicated subject and won't work like you want. If you want equalising columns then you will need the techniques that are mentioned in the 3 col demo sticky thread also. There are explanations in there as well.

    The simplest way to have a column match the content height is to use a repeating background image on the main container and then float your content on top of the image which will simulate a column. Thats the easiest way but there are others mentioned in the 3 col demo that use negative margins but soon get quite complicated.

    You can't specify 100% of something that is height auto or is a percentage of something else. The only thing in html that will resize itself depending on aother elements is a table cell. All the rest are tricks to accomplish this

    The repeating background is the simplest solution

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    thanks for the info and thanks for all the other great posts!


Bookmarks

Posting Permissions

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