SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: nested divs and the height issue
-
Feb 22, 2005, 17:55 #1
- 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
-
Feb 22, 2005, 18:52 #2
- 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
-
Feb 22, 2005, 21:36 #3
- 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