View Full Version : Absolute position divs expanding parent

01-28-2007, 07:53 PM
This is my first time posting here. I'm trying to learn CSS and am trying to get absolute positioned divs to expand their relatively positioned parent div. For instance in the image I have attached, I have three level of divs.

The Red boxes are my absolute positioned divs. They contain my navigation system of text that may become enlarged.
Their parent div is the Green (TopNavDiv) which is position:relative. It is there to allow me to use absolute position to place my navigation system.
The Black (TopNavContainerDiv) is the overall container div that has a vertically repeating background that I would like to see repeated no matter how large the text gets and how.

The problem is that the Green and Black divs don't encompass the red absolute positioned divs. The background is nonexistent because the div with that background isn't being pushed and expanded by the Red absolute positioned divs. If I place a spacer image in there or set the height then the background is there. But I can't set the height because I want the height determined by the absolute positioned divs.

How do I fix this? Thanks in advance!


01-28-2007, 08:21 PM
hi schnacky,
Well that's the problem with absolute positioning and is why it isn't often used for laying out the main building blocks. There are techniques to clear absolutely positioned elements, but I think they all depend on javascript.

Instead, I think you should look for an alternative layout. Why do you want to use absolute positioning for your menu? Wouldn't the div expand if you didn't use positioning?

01-28-2007, 08:58 PM
Hello schnacky,
I almost never use absolute positioning. Well, I goto great lengths to avoid it and only use it as a very last resort.
See if this does what you want:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: center;
* {
margin: 0;
padding: 0;
#wrap {
width: 490px;
margin: 100px auto 0 auto;
border: 4px solid #000;
padding: 5px 0 100px 0;
#inner_wrap {
width: 450px;
margin: 10px auto 0 auto;
border: 4px solid #00FF00;
overflow: hidden;
padding: 2px;
.box {
width: 65px;
height: 45px;/*just a size to hold it. Remove later if you want.*/
float: left;
border: 4px solid #CC0000;
margin: 0 2px 0 0;
<div id="wrap">
<div id="inner_wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

01-29-2007, 12:46 AM
Thanks! It's nice to know I wasn't missing anything at least.