Nested divs with absolute position

Forum Moderators: not2easy

Message Too Old, No Replies

Nested divs with absolute position

Parent div not resizing according to child size

Guran

12:46 pm on Jan 9, 2004 (gmt 0)

Here is my problem:

I have a parent div which is absolutely positioned but has a precentage width. Inside of this div I want three other divs as colums. These have ofcourse also a percentage width and will be placed 30 pixels from the top of the parent div.
The contents of these colums is dynamic which means I cannot have a static height value on the parent div.
I have tried to position the colums using absolute positioning. The problem with this is that the when the height of the colums are increased, these divs go outside of the parent div because of absolute positioning.
What is the correct way of implementing this so that the parent div have 30 pixels of space above AND 30 pixels below the largest of these columns?

Hope you understand what I'm talking about.

BitBanger

2:26 pm on Jan 9, 2004 (gmt 0)

I think this does what you want. The colors are there just to show how things layout.


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style>
#container {position: absolute; top: 20px; left: 40px; width: 80%;}
#spacer {clear: both; height: 30px; background-color: #0ff;}
#col1 {float: left; width: 25%; background-color: #f00;}
#col2 {float: left; width: 50%; background-color: #0f0;}
#col3 {float: left; width: 25%; background-color: #00f;}
</style>
</head>
<body>
<div id="container">
<div id="spacer"></div>
<div id="col1">
sample text<br />
sample text<br />
</div>
<div id="col2">
sample text<br />
sample text<br />
</div>
<div id="col3">
sample text<br />
sample text<br />
</div>
<div id="spacer"></div>
</div>
</body>
</html>

Of course IE6 seems to screwup by calculating the percentages wrong so that sometimes the far right column drops down below the other two. This can be "fixed" by reducing the total column widths to 99% instead of 100%.

Maybe someone else knows how to correct this.

RJell

2:37 pm on Jan 9, 2004 (gmt 0)

Instead of having a "spacer" div, I like to experiment with padding on the container or top margins on the child divs. Of course, this wouldn't work if any content is added to the spacer, but then I guess it wouldn't truly be a "spacer" anymore...

Just my personal preference.

BitBanger

3:18 pm on Jan 9, 2004 (gmt 0)

Yeah, that works too. So remove the spacer div's from the html, and change the container css to:


#container {position: absolute; top: 20px; left: 40px; width: 80%; padding: 30px 0; border: solid black 1px;}

The border was added to show that the bottom padding actually works.

BitBanger

4:08 pm on Jan 9, 2004 (gmt 0)

Ok, I managed to get rid of the dropping float problem in IE6 by adding a 1px right and left padding to the container div. So the CSS for the container now stands as:


#container {position: absolute; top: 20px; left: 40px; width: 80%; padding: 30px 1px; border: solid black 1px;}

The floats will still drop down if the browser window gets too small. A min-width property would solve this if IE supported it. :(