Forum Moderators: not2easy
I am trying my hand at divs (I have always just used tables) but I am having a little bit of a hassle with height:100%. I am unable to set it that the menu column (#Left) and the content column (#Right) does not overflow the main container (#MainContainer).
I'd appreciate it if someone could take a look at my code and tell me what I am missing.
Thanks.
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=utf-8" />
<title></title>
<link rel="stylesheet" href="css.css" media="screen">
</head>
<body>
<div id="MainContainer">
<div id="MainHeader"></div>
<div id="MenuTop"><div id="MenuTopTxt"><a href="#">Menu1</a> ¦ <a href="#">Menu2</a> ¦</div></div>
<div id="MenuShadow"></div>
<div id="Right"></div>
<div id="Left"></div>
</div>
</body>
</html>
CSS
html,body {
height:100%;
margin:0;
padding:0;
text-align:center;
background-color:#006600;
}
body {
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
div {
height:100%;
}
#MainContainer {
border:1px solid #000000;
width:768px;
/*Center Align All Browsers*/
position:absolute;
left:50%;
margin-left:-384px;
height:100%;
}
#MainHeader {
background:url(images/header.jpg);
height:132px;
width:768px;
}
#MenuTop {
background:url(images/topmenubg.gif) repeat-x;
height:22px;
width:768px;
}
#MenuTopTxt {
color:#FFFFFF;
font-size:11px;
font-weight:bold;
padding-left:5px;
padding-top:3px;
text-align:left;
}
#MenuTopTxt a:link,a:visited {
color:#FFFFFF;
text-decoration:none;
}
#MenuTopTxt a:hover {
color:#FFCC00;
text-decoration:none;
}
#MenuShadow {
background:url(images/shadow.gif) no-repeat;
height:5px;
width:768px;
margin:0 auto;
}
#Left {
position:absolute;
left:0;
padding:0;
width:180px;
background:url(images/sidemenubg.gif) repeat-y;
height:100% auto;
}
#Right {
position:absolute;
width:588px;
left:180px;
background-color:#FFFFFF;
}
