Positioning one div relative to another div

denhamd2 · 07-31-2008, 01:52 PM

Hi,

I am working on a site where I don't have access to the HTML (its dynamically driven), only the CSS. I have a <div> towards the top of my page and with the id "mylinks" and another <div> down towards the bottom with the id "mycontent" is it possible to position the div towards the top 250px beneath the 2nd div and 150px to the left of it? ie. positioning one named div relative to another div further down the page?

Thanks in advance

abduraooft · 07-31-2008, 02:12 PM

Please post your current code and explain on the basis of that.

denhamd2 · 07-31-2008, 02:31 PM

The HTML code is a bit messy and that is what is causing my problem. Basically I need to position the div with the id "mylinks" relative to the div further down the page "mycontent" - is this possible?

Code:

<table><tr><td width="200"><div id="mylinks"></div></td></tr><tr><td><div id="mycontent"></div></td></tr></table>

BoldUlysses · 07-31-2008, 02:33 PM

Table-based page layout = bad.

Nest the divs, set the outer one to position:relative and the inner one to position:absolute.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Div Position</title>

<style type="text/css">

* {
	border:0px;
	padding:0px;
	margin:0px;
	color:#fff;
}

#mylinks {
	position:relative;
	width:500px;
	height:200px;
	background:#f00;
}

#mycontent {
	position:absolute;
	top:250px;
	left:150px;
	width:300px;
	height:200px;
	background:#000;
}

</style>

</head>

<body>

<div id="mylinks">

 <p>My Links</p>

 <div id="mycontent">
 
  <p>My Content</p>
 
 </div>
 
</div>

</body>
</html>

Adjust all pixel values to suit.

denhamd2 · 07-31-2008, 03:00 PM

wonderful thanks that worked