div inheriting properties of container??

**cutcopypaste** · Apr 7, 2010 22:08

i'm trying to make a pretty basic setup.. two body tags in effect, one with a gradient fill and one with a background image.. i have the following

Code HTML4Strict:

<body>
<div id="bg">
<div id="wrapper">
</div>
</div>
</bg>
</body>

and then

Code CSS:

 
body {background-color:#e1e1e1;
background: url(images/bggrad.gif) repeat-x top;}
 
 
 
/*STRUCTURE*/
#bg {
	background: url(images/bgmain.jpg) 50% top no-repeat;
	}
 
 
#wrapper {
	margin: 60px auto 0;
	width: 844px;
	background-color: white;
	}

the bg div is only as high as the contents of the wrapper div, and starts at 60 pixels down (taking the same margin).. that makes no sense to me, should it not fill the entire page like the body element? that's what i'd like it to do..

**AutisticCuckoo** · Apr 8, 2010 00:38

Originally Posted by cutcopypaste

Code HTML4Strict:

<body>
<div id="bg">
<div id="wrapper">
</div>
</div>
</bg>
</body>

That </bg> tag is invalid.

Originally Posted by cutcopypaste

the bg div is only as high as the contents of the wrapper div

Yes, the initial value is height:auto, which makes a container adapt its height to its contents.

Originally Posted by cutcopypaste

and starts at 60 pixels down (taking the same margin)..

It's a case of collapsing margins, which is quite according to the CSS specification.

Originally Posted by cutcopypaste

should it not fill the entire page like the body element?

No. Not unless you set a height for it (and for the body element, too).

**Paul O'B** · Apr 8, 2010 03:14

If you want a 100% height container see my answer in this thread.

User Tag List

Thread: div inheriting properties of container??

Thread Tools

Display

div inheriting properties of container??

Bookmarks

Bookmarks

Posting Permissions