Positioning Sibling Elements

**LavernGingerich** · Jan 19, 2006 13:12

I have 2 sibling divisions within a parent division. How can I make those 2 sibling elements both position in the top left corner of the parent division. The second division either positions below the first, or if I use absolute positioning, it references off the top left corner of the page instead of the top left corner of the parent division.

Can you help?

**all4nerds** · Jan 19, 2006 13:21

Hello

float left

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>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{margin:0;padding:0;}
	.wra{background:#ffffcc;}
	
	* html .wra,* html .he{height:1%;}
	
	.he{background:#ccffff;float:left;}
	.lo{background:#ccffcc;float:left;}
	
	head+body .he:after{
	content: "."; 
	display: block; 
	height:0; 
	clear: both; 
	visibility: hidden;
	}
	
	.wra p{padding:5px;margin:0;}
	
	</style>
	<script type="text/javascript">

	</script>
</head>

<body>
<div class="wra">

<div class="he"><p>some text</p></div>

<div class="lo"><p>some more text</p></div>

</div>

</body>
</html>

**LavernGingerich** · Jan 19, 2006 14:44

Thanks, but the second sibling element still doesn't position in the top left corner of the parent sibling. It comes after the first sibling element.

**all4nerds** · Jan 19, 2006 14:48

Hello

OK

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>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{margin:0;padding:0;}
	.wra{background:#ffffcc;position:relative;}
	
	* html .wra,* html .he{height:1%;}
	
	.he{background:#ccffff;position:absolute;left:0;top:0;}
	.lo{background:#ccffcc;float:left;}
	
	head+body .he:after{
	content: "."; 
	display: block; 
	height:0; 
	clear: both; 
	visibility: hidden;
	}
	
	.wra p{padding:5px;margin:0;}
	
	</style>
	<script type="text/javascript">

	</script>
</head>

<body>
<div class="wra">

<div class="he"><p>some text</p></div>

<div class="lo"><p><br /><br />some more text<br /><br /><br /></p></div>

</div>

</body>
</html>

**LavernGingerich** · Jan 20, 2006 09:13

Thanks for your help!

User Tag List

Thread: Positioning Sibling Elements

Thread Tools

Display

Positioning Sibling Elements

Bookmarks

Bookmarks

Posting Permissions