Hello i need help for my project. I have a header, a body and a footer that have position relative. In the body the body there are 2 divs, one is relative and the second has an absolute position. The problem is that the absolutely positioned div contains dynamic contents and its height may increase or decrease. If it is smaller than the first div evrything is but if its height is longer, it overlaps the footer. The problem is solved if i put its position to relative. But for a reason i really need to put it absolute. Please help me. Here's my html code and css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styleN.css">
<title>Untitled Document</title>
</head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">
<div id="header">
<table border="1" align="center">
<tr>
<td>HEADER</td>
</tr>
</table>
</div>
<div id="content" class="border">
<div id="content_left">
<table border="1">
<tr>
<td>ZONE LEFT</td>
</tr>
<tr>
<td><img src="../mon/cafe_des_maman/images/blank.gif" width="1" height="50"></td>
</tr>
</table>
</div>
<div id="content_right">
<table border="1">
<tr>
<td>ZONE RIGHT</td>
</tr>
<tr>
<td><img src="../images/blank.gif" width="1" height="150"></td>
</tr>
</table>
</div>
</div>
<div id="footer">
<table border="1" align="center">
<tr>
<td>FOOTER</td>
</tr>
</table>
</div>
</body>
</html>
/* CSS Document */
body
{
color:#00CC33;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
height:100%;
}
#header
{
position:relative;
float:left;
width:100%;
height:auto;
background-color:#FF0000;
}
#content
{
position:relative;
width:960px;
margin-left:auto;
margin-right:auto;
height:auto;
}
#content_left
{
position:relative;
float:left;
width:630px;
height:auto;
background-color:#009999;
margin-right:5px;
}
#content_right
{
position:absolute;
left:635px;
top:0px;
width:325px;
height:auto;
background-color:#CC3399;
}
#footer
{
clear:both;
width:auto;
height:auto;
background-color:#FFCC00;
}
.border
{
border-width:3px;
border-style:solid;
border-color:#0000FF;
}
