Welcome to WebmasterWorld Guest from 54.224.118.247

Forum Moderators: not2easy

Message Too Old, No Replies

Background div with CSS

background div will not accommodate nested divs

     
7:34 am on Nov 14, 2003 (gmt 0)

New User

10+ Year Member

joined:Nov 14, 2003
posts:23
votes: 0


I have been working on a page design and could really use some help. The background of the page is a tiled GIF. I have set a margin so that the background creates a border for a div that I consider to be the "body" of the page. This main div has a white background, and I am trying to display the content of the page as divs within this div.

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?

1:10 pm on Nov 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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

Summary:
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

Suzy

6:46 pm on Nov 14, 2003 (gmt 0)

New User

10+ Year Member

joined:Nov 14, 2003
posts:23
votes: 0


Thank you very much. I seem to be getting closer to what I want. I don't understand floating, but hopefully that will change with time.

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?

6:59 pm on Nov 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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

Suzy

5:46 am on Nov 16, 2003 (gmt 0)

New User

10+ Year Member

joined:Nov 14, 2003
posts:23
votes: 0


I've been messing around with the layout and I think I may have confused myself even more. Below is the HTML.

<body>

<div id="main-background">

<div id="header">
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>

<div id="main-body">
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.
</div>

<div id="footer">
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.
</div>

</div>

</body>

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.

6:42 am on Nov 16, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts:1676
votes: 0


Can you float the navigation to the left with a width of 20% -

Then float the main body right -

and add clear: both; for the footer?

From what I see, definitely don't give up the fight and accept the pixels jsut yet.

11:24 am on Nov 16, 2003 (gmt 0)

New User

10+ Year Member

joined:Nov 14, 2003
posts:23
votes: 0


Have I told you lately that I love you?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members