Hi all,
I'm trying to create a three column CSS based HTML template.
Here's the XHTML: TriCol_Liq.htm
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tripple Column Layout Liquid</title>
<link rel="stylesheet" type="text/css" href="TriCol_liq.css" />
</head>
<body>
<!--START PAGE CONTAINER -->
<div class="container">
<!--START HEADER -->
<div class="header">
HEADER
</div>
<!--END HEADER -->
<!--START LEFT COLUMN -->
<div class="left">
LEFT
</div>
<!--END LEFT COLUMN -->
<!--START CENTER COLUMN-->
<div class="center">
<div class="center_content">
CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER
CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER
CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER
</div>
</div>
<!--START PENTER COLUMN -->
<!--START RIGHT COLUMN -->
<div class="right">
RIGHT
</div>
<!--END RIGHT COLUMN -->
<!--END PAGE CONTAINER -->
</div>
</body>
</html>and here's the CSS: TriCol_Liq.css
body{
margin: 0px 0px 0px 0px;
background-color: #ffcc66 ;
}
div.container{
width: 100%;
}
div.header{
position: absolute;
width: 100%;
height: 100px;
top: 0px;
left: 0px;
background-color: #ffcc66;
}
div.left{
position: absolute;
width: 160px;
height: 400px;
top:100px;
left: 0px;
background-color: #ffff33;
}
div.center{
position: absolute;
height: 400px;
top: 100px;
left: 160px;
right: 160px;
background-color: #ffff66;
}
div.center_content{
padding: 25px 25px 25px 25px;
}
div.right{
position: absolute;
width: 160px;
height: 400px;
top: 100px;
right: 0px;
background-color: #ffff99;
}The centre div should be liquid and expand/contract to fill the space between the right and left div depending on the size of the users browser window. It displays perfectly in Firefox, but IE stuffs some padding in between the centre div and the right div element. Does anyone know how I can tweek my CSS to make IE play along?
