...

View Full Version : Absolute Positioned Blocks Contained within Relative Positioned Block



amcalab
08-04-2007, 11:59 PM
As I understand it...

* you can nest absolute positioned divs within a relative positioned container div
* the container div itself will be inline with the rest of the document
* therefore, the contents of the container div will not overlap the other parts of the document

For example, suppose you wanted a main content section sandwiched between a header and footer. And suppose, the layout within the main content section contained absolute positioned divs. It seems like you could wrap the absolute positioned sections/divs in a relative positioned container to ensure they did not overlap the footer.

But, when I do this with the code below, the text within the contained div overlaps the footer. Why is this not working as expected?

Please note that I am not looking for the best way to achieve such a layout. I am just experimenting with divs and positioning - trying to learn the ropes - and am trying to figure out why they aren't working the way I thought.

Here is the CSS...

body {
background: #0D4C7D;
}

#header {
background: #FFFFFF;
width: 100%;
height: 150px;
}

#footer {
background: #94C37A;
width: 100%;
height: 50px;
}

#container {
position:relative;
width: 100%;
}

#contained {
position:absolute;
}


Here is the HTML

<body>
<div id="header">Header</div>
<div id="container">
<div id="contained">Absolute Positioned Contained Div</div>
</div>
<div id="footer">Footer</div>
</body>

Jutlander
08-05-2007, 01:03 AM
There's no need to position anything if you just want a content area sandwiched between a header and a footer.

Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin-bottom: 40px;
}
#wrapper {
margin: 0 auto;
margin-top: 15px;
width: 700px;
border: 1px solid #777;
color: #444;
background: #fff;
}
#header {
border-bottom: 1px solid #777;
padding: 1em;
background: #ddd;
}
#content {
padding: 15px;
}
#content p {
margin-bottom: 20px;
}
#content h2 {
margin: 0 0 .5em 0;
}
#footer {
clear: both;
border-top: 1px solid #777;
text-align: center;
padding: 10px;
background: #ddd;
}
</style>
</head>

<body>

<div id="wrapper">

<div id="header"><h1>Header</h1></div>

<div id="content">

<h2>Content header</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div id="footer"><p>Lorem ipsum dolor sit amet</p></div>

</div>

</body>
</html>

koyama
08-05-2007, 01:03 AM
For example, suppose you wanted a main content section sandwiched between a header and footer. And suppose, the layout within the main content section contained absolute positioned divs. It seems like you could wrap the absolute positioned sections/divs in a relative positioned container to ensure they did not overlap the footer.
This is not correct. An absolutely positioned element will under no circumstances expand its parent. This is the main problem with absolute positioning. Therefore absolute positioning of ones building blocks is rarely a good choice for doing the basic page layout.
Simultaneous post



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum