Div inheriting properties of container?

HTML & CSS
1

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

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

and then



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…

2

That </bg> tag is invalid.

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

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

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

3

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