Getting my head around absolute and relative positioning

I have a site that I’m going to have a on top, with a content area overlapping the slideshow. You can see what I’m trying to do by following this link:

http://atomiccoffee.com/test.php

I’m probably going about this wrong, as I’m new to trying to position elements like this. What I would like to happen is for the container div to stretch with the absolutely positioned bottom div. Right now, since it’s positioned absolute, the container div does not stretch and the footer pops up below the slide div…

Code as follows:
STYLE

#contatiner {
	width: 1400px;
	border: 1p solid #000;
	background: #999;
	margin: 0 auto;
	position:relative;
}
#topnav {
	width: 1200px;
	height: 100px;
	background: #ffcc00;
	margin: 0 auto;
}
#slides {
	width: 1400px;
	background: red;
	margin: 0 auto;
	height: 500px;
	
}
#bottom {
	width: 1200px;
	height: 800px;
	background: #333;
	margin: 0 auto;
	position:absolute;
	top:500px;
	left:100px;
	z-index: 1000;
}
#footer {
	width: 1400px;
	margin: 0 auto;
	background: pink;
	position: relative;
}

HTML

div id="contatiner">
	<div id="topnav">topnav</div>
	<div id="slides">slide</div>
	<div id="bottom">bottom</div>
</div>
<div id="footer">footer</div>

This should do the trick!


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0;
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

html, body {
	height: 100%; /* html & body set to height 100% to have a reference for the container */
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 87%;
	line-height: 130%;
	color: #474747;
}

#contatiner {
	width: 1400px; /* 1402px with borders */
	min-height: 100%; 
	border: 1p solid #000;
	background: #999;
	margin: 0 auto -50px;
	position:relative;
}

* html #contatiner {
	height: 100%; /* For the IE browsers that don't know min-height */
}

#topnav {
	width: 1200px;
	height: 100px;
	background: #ffcc00;
	margin: 0 auto;
}

#slides {
	width: 1400px;
	background: red;
	margin: 0 auto;
	height: 500px;
	position: relative;
	z-index: 1;
	
}

#bottom {
	width: 1200px;
	height: 800px;
	margin: -100px 100px 0;
	background: #333;
	position:relative; /* Instead of absolute postion I use relative position, negative top margin and higher z-index as the slideshow, in order to make this div overlap the slideshow */
	z-index: 2;
}

#footer {
	width: 1400px;
	margin: 0 auto;
	background: pink;
	position: relative;
	z-index: 3;
}

#footer,
.clear {
	height: 50px;
	clear: both;
}
</style>
</head>

<body>
<div id="contatiner">
	<div id="topnav">topnav</div>
	<div id="slides">slide</div>
	<div id="bottom">bottom</div>
  
  <div class="clear"></div>
</div>
<div id="footer">footer</div>
</body>
</html>


If you have any questions please feel free to ask

Any absolutely positioned elements are taken ‘out of the flow’, and don’t affect the layout of any other elements. Without knowing what’s going in each of the boxes it’s difficult to know how best to do it, but can you use position:relative; or some other method to position the #bottom?

/Instead of absolute postion I use relative position, negative top margin and higher z-index as the slideshow, in order to make this div overlap the slideshow/
Hi donboe,
That’s the approach I would have taken too. Except in this case it can be done without any relative positioning for z-index. Just let the divs auto stack according to the order of the mark up.

You can also eliminate that clearing div since your sticky footer sits outside of the wrapper. That would still be the case if there were floats above it since you would be containing them in the wrapping div.

I set a negative top margin on the wrapper and a 50px top border to account for the footer height. This layout would still need the Opera & IE8 min-height:100% fixes though, they are explained in the sticky footer FAQ.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
 
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#wrap {
    width: 1400px;
    min-height: 100%;
    margin: -50px auto 0;/*make room for sticky footer with neg top margin*/
    background: #999;
}
* html #wrap {
    height: 100%;/* IE6 min-height */
}
#topnav {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: #ffcc00;
    border-top: 50px solid red;/*recover #wrap negative top margin*/
}
#slides {
    width: 1400px;
    height: 500px;
    margin: 0 auto;
    background: red;
}
#bottom {
    width: 1200px;
    height: 800px;
    margin: -100px 100px 0;
    background: #333;
}
#footer {
    width: 1400px;
    height: 50px;
    margin: 0 auto;
    background: pink;
}
</style>
</head>
 
<body>

<div id="wrap">
    <div id="topnav">topnav</div>
    <div id="slides">slide</div>
    <div id="bottom">bottom</div>
</div>

<div id="footer">footer</div>

</body>
</html>

Hi Ray, First off all a very happy New Year :slight_smile:

Although I’m aware that with the stagging order as it is, you indeed don’t need the relative positioning, I keep finding myself, always doing it this way :confused:. After your comment, I promised myself to be more alert to this kind of situations :slight_smile: Thank you for that :tup:

Most excellent solution!

Here’s a small question. Can these divs then be assigned z-index if needed? The slideshow will be done in jquery, and there is a possibility that I will need to play with the z-indexes to make sure the slideshow stays behind the bottom div… though this might not even come up.

Yes you can but in that case they need to apply a position (position is needed to apply a z-index)