RE: CSS Positioning

Nick,

Not sure I fully understand your question but if you are looking to position
a div within another positioned element like maybe a table that is centered
or something similar you can simply nest a div set to absolute positioning
within a div with relative positioning.

This allows you to move your nested div based on the parent div rather than
the browser and then just position the parent where you want it in a table
or whatever.  

There are many approaches possible but here is one that I have used:


<html>
<head>
<title></title>
<style type="text/css">
..mainLayer{
	position:relative;
	top:0px;
	left:0px;
	width:792px;
	height:214px;
	z-index:1;
	background-color: #000000;	
}
..topBorder{
	position:absolute;
	top:0px;
	left:0px;
	width:792px;
	height:10px;
	z-index:2;
	background-color: #666666;
}
..logoTop{
	position:absolute;
	top:0px;
	left:0px;
	width:217px;
	height:200px;
	z-index:1;
	background-color: #FFFFFF;
}
..logoTxt{
	position:absolute;
	top:30px;
	left:200px;
	width:336px;
	height:47px;
	z-index:1;
	background-color: #CCCCCC;
}
..loginTxt{
	position:absolute;
	top:5px;
	left:561px;
	width:220px;
	height:17px;
	z-index:3;
	background-color: #999999;
}
..adBanner1{
	position:absolute;
	top:118px;
	left:613px;
	width:150px;
	height:84px;
	z-index:1;
	background-color: #666666;
} 
..adBanner2{
	position:absolute;
	top:120px;
	left:232px;
	width:327px;
	height:84px;
	z-index:1;
	background-color: #333333;
}
</style>
</head>

<body>
<table class="mainContainer" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
        <div id="MainLayer" class="mainLayer">
		<div id="Layer1" class="topBorder"></div>
		<div id="Layer2" class="logoTop"></div>
		<div id="Layer3" class="logoTxt"></div>
		<div id="Layer4" class="loginTxt"></div>
		<div id="Layer5" class="adBanner1"></div>
		<div id="Layer6" class="adBanner2"></div>
		</div>
	</td>
  </tr>
</table>

</body>
</html>


Hope this helps!

Mark


-----Original Message-----
From: www-html-request@w3.org [mailto:www-html-request@w3.org] On Behalf Of
Nick Mitin
Sent: Tuesday, May 24, 2005 1:10 AM
To: www-html@w3.org
Subject: CSS Positioning


I'm developing a system of html elements positioning according to their
coordinates. Let's say the browser window is a form and elements are
controls:
Everything was cool until I started developing a container for the element.
The problem is that if I use <DIV> as a container positioning is not working
as I expect. So the question is how one can position elements inside the
absolutely positioned element
<html>
<style type="text/css">
...first {
  position: absolute;
  top: 100px;
  left: 100px;
}
...second {
  position: absolute;
  top: 100px;
  left: 300px;
}
...third {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
<body>
<div class="first">
  <div class="third">
  </div>
</div>
<div class="second">
  <div class="third">
  </div>
</div>
</body>
</html>

 Is not working as expected.

Received on Tuesday, 24 May 2005 20:40:27 UTC