Layers inside a growing div-area

[peer_g]

Hi there.

I got a problem wirth my CSS Code.
Tried to create a main div with my whole stuff an a green background.
Under this area should be another div with some copyright flags. So it looks like 2 rows; one coloured, based on css divs.
Both areas are position:relative.
Now the problem: In the first coloured div, i want to insert some layers with absolute positioning. The layers dont care about thhe relativation and must-have growing of the first div.
The more stuff is inside coloured layer; the bigger the coloured layer should be.

My code is:

(+html stuff e.g)

<div id="content">
some layers inside.. shoul donly be in this div!
</div>
<div id="bottom"> copyright &copy; 2003 </div>



Any suggestions?

Thx.

[Tim158]

I've had the same problem with CSS on many occassions.

What you can do, is to give the "content div" a fixed width and set the size of your content font (i.e. 12px). Therefore, in theory, the size of your "content div" will be the same everytime it loads in different resolutions.

Is the growing of the content div really a "must-have"? (does it need to grow?)

I'm sorry this isn't a very accessible solution but it seems to be one of the only solutions.

Tim.

[Pierre Rouillet]

yo boy, post an url or the entire code (better not!), I may be able to help you then.

[toicontien]

Absolute positioning was meant to remove an element from the normal document flow and create a new independant document flow inside itself. Unless you know exactly how tall an element is going to be, it's impossible to make sure other elements are displayed below it.

What type of affect are you looking to accomplish? And I must reiterate Pierre Rouillet's post above: please give us a link to the code in question.

[nkaisare]

Two things to remember about absolute positioning:
1. Absolute positioning removes the content from the natural flow of the document. So your container div will not extend to the bottom of the contents of an absolutely positioned div.
2. Absolute positioning offsets the positioned element with respect to its parent positioned element.

Layers are not valid html elements. You should use div instead of layers.

Think if absolute positioning is required. If it isn't required, its better to let the contents flow in the naturally.

<div id="content">
<div id="left">This goes left</div>
<div id="mid">This goes in the center</div>
<div id="right">This goes to the right</div>
</div>
<div id="bottom">Copyrights</div>
In the example like above, the central column is for the contents, and hence is usually the longest. Dont position it. Let it guide the flow. Position the left and right cols. style="background..." the "content" div as desired.

HTH
Niket