0

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;
}
4
Contributors
3
Replies
5
Views
8 Years
Discussion Span
Last Post by MidiMagic
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.