How to position a div below an absolute positioned div?

Forum Moderators: not2easy

Message Too Old, No Replies

How to position a div below an absolute positioned div?

Is this possible?

physics

6:45 pm on Jun 20, 2007 (gmt 0)

I have a div, "mainContent", that is absolutely positioned. I'd like to position another div, "footer", directly below it. The height of the first div is variable.

I tried:
<div id="mainContent">
...
<div id="footer">
</div>
</div>

#mainContent{
position: absolute;
top: 75px;
z-index: 0;
}

#footer{
position: absolute;
bottom: 0px;
z-index: 0;
}

But this caused the mainContent div to be moved down to the bottom of the page also. This does work if I make the mainContent have position: static; but in that case it isn't positioned quite as I'd like. Anyone know how to do this? Thanks.

Milamber

6:49 pm on Jun 20, 2007 (gmt 0)

try putting an absolute positioned wrapper around both those divs then dont position the internal divs at all.

[edited by: Milamber at 6:49 pm (utc) on June 20, 2007]

Xapti

7:25 pm on Jun 20, 2007 (gmt 0)

Yeah you can't do it with an absolutely positioned variable size element.
If you can do what milamber said then that's fine. Otherwise you'll need to redesign your page, or force users to use javascript to render your page. I'd certainly go with the first option, because your current design seems to be quite strange.
What are you doing?

physics

7:00 am on Jun 21, 2007 (gmt 0)

Thanks Milamber. I ended up doing it by making the mainContent one relative but with a 75px buffer ... it's the first div. Then I can do the relative -> absolute positioning.
What I've done is have the main content div first in the HTML but after some other elements in the page display, and then have the footer below everything.

Milamber

1:42 pm on Jun 21, 2007 (gmt 0)

Figured that's what you were after, I built a quick template like that yesterday:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
 margin:0;
 padding:0;
 border:1px solid black;
}
#wrapper{
 position:relative;
 top:0;
 margin: 0 auto;
 width: 720px;
}
#content{
 position:relative;
 margin-top:100px;
 top:0;
 width: 720px;
}
#header{
 position:absolute;
 left:0;
 top:0;
 width: 720px;
 height:100px;
}
#footer{
 clear:both;
 width: 720px;
}
</style>
</head>
<body>
<div id="wrapper">
 <div id="content">
Content
 </div>
 <div id="header">
Header
 </div>
 <div id="footer">
Footer
 </div>
</div>
</body>