woody993 woody993 - 9 days ago 5
CSS Question

Absolute DIV height 100%

I have been working on this for the past couple of hours, and searching the web and stackoverflow hasn't been much support. How do I make

#gradient
and
#holes
fill the entire page?

I have used the Inspect Element feature in Safari, and when I highlight the body element it does not fill the entire window.

alt text

HTML:

<body>

<div id="gradient"></div>
<div id="holes"></div>

<div id="header">Header Text</div>
</body>


CSS:

html, body {
height:100%;

margin:0;
padding:0;
}

body {
background-image:url(../Images/Tile.png);
background-color:#7D7D7D;
background-repeat:repeat;
}

#gradient {
background-image:url(../Images/Background.png);
background-repeat:repeat-x;

position:absolute;
top:0px;
left:0px;
height:100%;
right:0px;
}

#holes {
background-image:url(../Images/Holes.png);
background-repeat:repeat;

position:absolute;
top:2px;
left:2px;
height:100%;
right:0px;
}

#header {
background-image:url(../Images/Header.png);
background-repeat:repeat-x;

position:absolute;
top:0px;
left:0px;
width:100%;

padding-top:24px;
height:49px; /* 73 - padding */

color:rgb(113, 120, 128);
font-family:Helvetica, Arial;
font-weight:bold;
font-size:24px;
text-align:center;
text-shadow:#FFF 0px 1px 0px;
}

Answer

Well it looks to me that your element with all the content is floated. If it is then its not going to expand the body unless it is cleared.