absolute positioning within div

@estheraJul 20.2007

i have a div id of mainhome

now I want all the other divs of the page to be positioned according to that div

now i’m doing for example

.linkguest{
position: relative;
right: 31;
top: 218;
}

but this is not working — i want it to be in that exact position relative to mainhome

what am I doing wrong?

to post a comment

CSS

4 Comments(s) _↴

@WebJoelJul 20.2007 — #"position:relative;" remains in the document flow, -even when 'positioned' elsewhere, it is in fact, still in the normal place that it would reside even without having been positioned. It 'occupies invisible space' equal to itself...

A better way to do this is to make a main 'wrapper' that is fluid ("%") and of a defined height, make it "position:[I]relative[/I];" (with no 'left' or 'right' values, unless required for other reasons), and then [I]inside[/I] this relative-DIV, position smaller "position:[B]absolute[/B];" DIVs.

"absolute" is '[I]out of the document flow[/I]', meaning that it does not touch/interfere with any other element on the page. This is handy for DIVs that need to be 'overlapped' (like a deck of playing cards), or need to 'move' (resize with variable-width 'relative' container, etc.).

Here is an example of what I mean: the 'container' is "relative" and the 'cards' are "absolute" (and positioned to be overlapping).. :<html>

<head>

<style type="text/css">

#container {position:relative; width: 500px; height:395px; border:1px solid #000; background:#000; }

.card1, .card2, .card3, .card4, .card5 {position: absolute; background:#454545; border:1px solid #fff; width:150px; padding:3px; height:250px; color:#fff;}

.card1 {margin:120px 0 0 20px;}

.card2 {margin:95px 85px;}

.card3 {margin:70px 170px;}

.card4 {margin:45px 245px;}

.card5 {margin:20px 330px;}

</style>

</head>

<body>

<div id="container">

<h2 style="position:absolute; left:20px; top:10px; color:white;">Container Box</h2>

<h2 style="position:absolute; right:20px; bottom:10px; color:white;">Container Box</h2>

<div class="card1">

first card </div>

<div class="card2">

second card </div>

<div class="card3">

third card </div>

<div class="card4">

fourth card </div>

<div class="card5">

fifth card </div>

</div>

</body>

</html>[/QUOTE]

@estheraauthorJul 20.2007 — #thanks -- i tried what you said but see the code below - - everything is staying at the top left and not in it's position. (all the positions should be relative to mainhome

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <title>d</title>
 <style>
 
 /* CSS Document */
 
 body{
 
 padding:0px;
 
 }
 #outer{
 margin:auto;
 width:750px;
 }
 #mainhome{
 font-family: Arial, Helvetica, sans-serif;
 background-image: url(images/home_page_background.jpg);
 background-repeat: no-repeat;
 background-position: right top;
 width:750px;
 height:1082px;
 position:relative;
 
 
 
 }
 .linkguest{
 position: relative;
 right: 31;
 top: 218;
 }
 
 .linkdonor{
 position: absolute;
 right: 31;
 top: 319;
 }
 .linkparent{
 position: absolute;
 right: 31;
 top: 426;
 }
 
 
 .linkcaregiver{
 position: absolute;
 right: 31;
 top: 526;
 }
 
 
 #news{
 position: absolute;
 right: 151;
 top: 319;
 }
 #news img{
 float:right;
 }
 #newstb{
 background:#ffffff;
 width:472px;
 height:249px;
 overflow: auto;
 position: absolute;
 scrollbar-base-color:#FDC6CC;
 text-align:right;
 float:right;
 }
 
 
 
 </style>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 </head>
 
 <body>
 <div id=outer>
 <div  id=mainhome> 
 <div class=linkguest><img src="images/guest.gif" alt="Guest" width="103" height="101" border="0"></div>
 <div class=linkdonor><img src="images/donor.gif" alt="Guest" width="106" height="109" border="0"></div>
 <div class=linkparent><img src="images/parent.gif" alt="Guest" width="106" height="104" border="0"></div>
 <div class=linkcaregiver><img src="images/caregiver.gif" alt="Guest" width="99" height="103" border="0"></div>
 <div id=news> <img src="images/news.gif" width="229" height="37" border="0"><br>
 <div id=newstb> this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 this is dummy text <bR>
 will be pulling form the db<br>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
 
 [/code]

@WebJoelJul 20.2007 — #I really have no idea what you are after here. I don't understand the need for an 'outer' and an 'inner' DIV, so I changed a few things and have this to show you. The need for 'positioning' here is really not warranted. The same thing can be achieved with 'centering' and 'margins'. And, [I]a complete !doctype[/I] that includes the [B]URL[/B] to referance it (absolutely required to keep IE from messing-up).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"[B]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/B]">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>d</title>

<style type="text/css">

/* CSS Document */

* { padding:0px; margin:0; }

p {margin:14px 0 10px 0;}

#outer{ position:relative; margin:auto; width:750px;}

#mainhome{ position:relative; font-family: Arial, Helvetica, sans-serif; background-image: url(images/home_page_background.jpg); background-repeat: no-repeat; background-position: right top; width:750px; height:1082px; border:1px solid gray;}

.linkguest {float:right;}

.linkdonor {clear:right; float:right;}

.linkparent {clear:right;float:right;}

.linkcaregiver {clear:right;float:right}

#news {width:230px; margin:75px auto 0 auto; border:1px solid silver;}

#news p {margin:0;}

#news p img {width:230px; margin:0 auto;}

#newstb{ background:#ffffff; width:472px; height:249px; overflow: auto; position: relative; scrollbar-base-color:#FDC6CC; text-align:right; border:3px double silver; margin:0 auto; padding:25px 15px; }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<div id="outer">

<div id="mainhome">

<div class="linkguest">

<img src="images/guest.gif" alt="Guest" width="103" height="101" border="0" />

</div>

<div class="linkdonor">

<img src="images/donor.gif" alt="Guest" width="106" height="109" border="0" />

</div>

<div class="linkparent">

<img src="images/parent.gif" alt="Guest" width="106" height="104" border="0" />

</div>

<div class="linkcaregiver">

<img src="images/caregiver.gif" alt="Guest" width="99" height="103" border="0" />

</div>

<div id="news">

<p><img alt="image over news content scrolling" src="images/news.gif" width="229" height="37" border="0" /></p>

</div>

<div id="newstb">

<h1 title="First-Level Header">First-Level Header</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit

risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu,

pulvinar et, volutpat vel, elit. <img alt="pic-1" src="#" style=

"width:60px; height:75px; border:1px solid black; margin:8px; float:left;" />

<img alt="pic-2" src="#" style=

"width:60px; height:75px; border:1px solid black; margin:8px; float:right;" />

Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero

fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus

pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada

fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc

purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.

Nulla accumsan turpis at erat.</p>

<h1 title="Second-Level Header">Second-Level Header</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi

lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam

tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien

pulvinar purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi

lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam

tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien

pulvinar purus, vel hendrerit ipsum tellus at ante.</p>

</div>

</div>

</div>

</body>

</html>[/QUOTE] This will look the same for IE and Fx.

@estheraauthorJul 21.2007 — #well in your example everything is in the wrong place

i thought that the best way to position things was with positioning?

would it be better to just leave it as you have it floating and adding margins to the top and side to get it where I want?

Also in #CSS _↴

New IE7 Problems Target Parent Container's Child CSS Problem absolute position IE6?

Success!

Help @esthera spread the word by sharing this article on Twitter...

Tweet This

absolute positioning within div

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

absolute positioning within div

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴