Absolute Positioning Problem

[N1CK3RS0N]

Hello,

 

I'm trying to use absolute positioning to organize the columns of a layout. The benefit is that you can easily shift columns around by just editing the positioning on the CSS style sheet as apposed to having to edit the HTML itself.

 

I attached a demo so you can try for yourself. I also pasted the code below.

 

Basically the problem is this. The body which is containing the columns doesn't expand with the columns because they are using absolute positioning. It treats it as if it isn't contained in the body itself. This is no problem if the columns are not contained in a body for the theme, but is a big problem if it is.

 

In the example. I have the body with a white background. I would like it to expand with the columns.

 

The only solution I could think of would be to use a javascript which determines the height of the tallest column and then sets the height of the body to that. I would like to avoid that if possible.

 

<div class="body">
<div class="col1">
	</div>
<div class="col2">
	</div>
<div class="col3">
	</div>
</div>

 

.body {
position: relative;
background: #ffffff;
}

.col1 {
position: absolute;
left: 0px;
width: 300px;
height: 200px;
background: #00ff00;
}

.col2 {
position: absolute;
right: 0px;
width: 500px;
height: 400px;
background: #ff0000;
}

.col3{
position: absolute;
left: 300px;
width: 200px;
height: 300px;
background: #0000ff;
}

 

[attachment deleted by admin]

[haku]

If you are going to use absolute positioning, then the only way is a javascript solution. Positioning something absolutely means that all other elements lose awareness of that element (to simplify it a little), so they cannot react to the content in the absolute positioned element.

 

You are better off using a different method of positioning though, as javascript solutions are dependent on the user having javascript enabled.

[Anti-Moronic]

Sadly javascript would be the only solution here because the inner divs cannot detect anything positioned absolutely.

 

So, unless you are going to save the parameters after and have them hard coded into the page, it's not an ideal solution.

 

An ideal solution is to use php to position the elements dynamically and use proper positioning with css.