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;
}

Why do you need to keep it absolute? Maybe solving the problem making it relative is easier to fix than this one...

Try wraping it inside another relatively positioned div.

Absolute positioning causes all kinds of hard to fix trouble. My advice is DON'T!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.