Ok so I got a main container div which is 100% in height.
This works fine.
I then have a left container for a menu, and a right container for content.
I have put the height for these as 100% but it doesn’t work.
In side the right container I have three divs, header, content and footer.
Can someone take a look and see why the left and right containers aren’t sizing to 100%.
Here is my css code:
/* CSS Document */
HTML, BODY
{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
background: #A38771;
}
#mainBody
{
width: 755px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
* HTML DIV#mainBody
{
height: 100%;
}
#left
{
height: 100%;
width: 80px;
float: left;
}
#subBody
{
height: 100%;
width: 675px;
float:right;
}
#header
{
height: 278px;
background: url(../images/template_images/index_01.jpg);
}
#content
{
background: url(../images/template_images/index_02.jpg);
background-repeat: repeat-y;
}
#footer
{
height: 24px;
bottom: 0px;
background: url(../images/template_images/index_03.jpg);
}
And Here is my HTML code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Winston Churchill</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainBody">
<div id="left"><img src="images/template_images/index_04.jpg" alt="Logo_Left" width="80" height="226" /></div>
<div id="subBody">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Many thanks in advance.