Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
All of the content-related divs display where they should (for the most part). The problem is the white-background div. I want it to grow only enough to accomodate the divs that are nested in it. However, unless I specify a height in pixels, the background div has no height at all (setting the height to 100% does not produce the desired effect). The nested divs seem to acknowledge the existence of the white-background div, but the background div appears to know nothing of its nested divs.
The white-background div's postitioning is relative, and the positioning of the nested divs is absolute. I've tried other combinations, but I can't get the page to do what I want it to do. What am I doing wrong?
The white-background div's postitioning is relative, and the positioning of the nested divs is absolute.
There's your answer..
The absolute divs are "removed" from the flow of the page therefore they have no parent element.
So when you are mentioning nested divs.. they are not in effect actually nested they are sitting "on top" of the white background div. The only relationship they have is that in specifying position relative on your white div.. the "nested divs" are taking their position from it as opposed to the viewport. They cannot pass inheritance between each other.
So try using position relative on the nested divs too.. well one of them (longest one?)~ if you have a "multi" column style look in that content div, you can still use absolute positioning but not on them all... or you could float one or more of thoses divs too, but then you will still have a height inheritance problem if you float them all.. without seeing the layout that's about as close as I can guess
One div in that content div needs to remain relative in order to "stretch" the background, unless you want to use floats and a "containing floats" hack
Can two divs be positioned relative to the same "parent" div? I'm new to CSS positioning, and it appears to me that each relative div can only be relative to the one that comes immediately before it in the source code, even if the author has a different hierarchy in mind.
The page i'm working on right now should have a header div, two column divs, and a footer div all nested in the aforementioned background div. If I leave out the column on the right and set the position property to relative for all the other divs, the page looks "normal." When I try to fit that right-column div into the layout, I can't get it to. Do I have to resort to absolute positioning for this final div?
Do I have to resort to absolute positioning for this final div?
Yep possibly, but don't think about it as "resorting to" you have to think about positioning your content as befits your desired layout. if your "left" div will always be the longest then it makes perfect sense to position the right one absolutely. (I like to refer to it as as post-it note!)
You're quite correct about the relative positioning an element will position itself relative to the preceeding element.
>>floating the left and right divs would be where you don't which of the divs will be the longest and you want the parent to stretch regardless! but "containing floats" is a whole new ,exciting learning curve ;)
try, test, play find out what works and what doesn't
the great thing about CSS is that there is many ways to do things and you don't find out 'til you try
Header for every page should be at the top of the background section. It should span the entire width of the background div.</div>
<div id="navigation">Links should go here. I'd like for this column to take up 20% of the background div's width.</div>
This section should be to the right of the links, but not to wrap around the links' div, and should take up the remainder of the background div's width.
Footer for every page that spans the entire width of the background div and has no space between its bottom and the bottom edge of the background div.
I'm close to giving up and just using specified pixel heights, but I'm a glutton for punishment and I really want this to work. I like the idea of a page that grows to accommodate what's on it. If posting the CSS would help, I can do that, but I'm always changing it.