100% height on div

I am trying to create a 3-column page where the left and right columns hold small images which give the center column a shadow effect. The problem is that the left and right columns won't expand all the way down the center content, they inexplicably stop about 1000px down regardless of how tall the center div is. Below are the relevant class/id definitions. You'll see that the right div has a height of 200%, I did this just to see what would happen and sure enough it is twice as long as the left one but still stop short of the bottom of the page. Where is this shortened definition of 100% coming from?

html, body
{
height: 100%
}

#header
{
position: relative;
background-image: url(/images/resume_bookend.gif);
background-repeat: no-repeat;
z-index: 0;
height: 53px;
margin-left: 300px;
}

#left
{
position: absolute;
background-image: url(/images/resume_bevel_left.gif);
width: 10px;
left: -10px;
height: 100%;
overflow: hidden;
}

#center
{
position: absolute;
float: left;
top: 25px;
left:50%;
width: 610px;
margin-left: -300px;
/*background-color: #F2F0E1;*/
font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;
color: #444444;
font-size: 7pt;
height: 100%;
}

#right
{
position: absolute;
margin: 0px 0px 50px 938px;
width: 20px;
background-image: url(/images/resume_bevel_right.gif);
background-repeat: repeat-y;
height: 200%;
}

And here is the barebones html associated with the above css:
<html>
<body>
<div id=header></div>
<div id=left></div>
<div id=center>
[content]
</div>
<div id=right></div>
</body>
</html>

It should be noted that placing the right and left divs inside the center div, in the hopes that they would inherent the 100% height from the center div, does not work.

here are my dtd and html standards declarations but it should be noted that changing them seems to have no effect on the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Here is a rough representation of what this code produces:

LCR
LCR
LCR
-CR
-CR
-CR
-C-
-C-
-C-
-C-
-C-
-C-
-C-

100% height on div

problem with height on div image border

clockware

coopersita

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week