Outer DIV should encompass (absolutely positioned) inner DIV: How? :/

David Winter

This is probably trivial, but I simply don't get it.

I have a "position:absolute" type DIV with another one in it. I want
the outer DIV to encompass the inner one. I.e., when the inner DIV
contains text and images, the outer DIV should grow (vertically), so
that its background color and frame encompasses the inner DIV and all
its content.

Currently, when I do this:

<style type="text/css">
#OuterBox {position:absolute;top:10px;left:10px;width:400px; background-color:#eeeeff;}
#ContentBox {position:absolute;top:10;left:10px;width:200px;ba ckground-color:#eeffee;}
</style>

<div id="OuterBox">
<div id="ContentBox">
<p>ContentBox<br />1<br />2<br />3<br />4<br />5 etc.</p>
</div>
</div>
.... "ContentBox" starts where I want it to, but *overlaps* OuterBox
instead of filling it.

I tried "overflow:visible" for the outer DIV, but it didn’t
work.

Some help would be highly appreciated.

Jul 20 '05 #1

Stanimir Stamenkov

/David Winter/:

<style type="text/css">
#OuterBox {position:absolute;top:10px;left:10px;width:400px; background-color:#eeeeff;}
#ContentBox {position:absolute;top:10;left:10px;width:200px;ba ckground-color:#eeffee;}
</style>

<div id="OuterBox">
<div id="ContentBox">
<p>ContentBox<br />1<br />2<br />3<br />4<br />5 etc.</p>
</div>
</div>

... "ContentBox" starts where I want it to, but *overlaps* OuterBox
instead of filling it.

That's because your "ContentBox" is absolutely positioned and is
taken out of the content flow of the "OuterBox". Just change the
"ContentBox" style:

#ContentBox {
margin-top: 10px;
margin-left: 10px;
width: 200px;
background-color: #eeffee;
}

--
Stanimir

Jul 20 '05 #2

David Winter

> That's because your "ContentBox" is absolutely positioned and

is taken out of the content flow of the "OuterBox".

I wasn’t aware that "position:absolute" puts an element out of
the content flow with regards to its *size*.

Let’s assume I want to give an element a fixed starting position
relative to its parent element. It should keep that position - no
matter what other elements follow/precede. In this case, I need
"position:absolute", right? And this means that the parent and other
child elements of the same parent will be positioned as if the
absolutely positioned DIV weren’t there at all?

So there is no way to give an element a fixed, unchangeable starting
position and still have other elements flow around it?

Jul 20 '05 #3

Stanimir Stamenkov

/David Winter/:

I wasn't aware that "position:absolute" puts an element out of
the content flow with regards to its *size*.
If an element is out of the flow how its size should impact the
flow? If the element still has impact on the flow then it is not
taken out of the flow.

Just read the CSS2 spec - its "Visual formatting model"
<http://www.w3.org/TR/CSS21/visuren.html>.
Let's assume I want to give an element a fixed starting position
relative to its parent element. It should keep that position - no
matter what other elements follow/precede. In this case, I need
"position:absolute", right?
Depends.
And this means that the parent and other
child elements of the same parent will be positioned as if the
absolutely positioned DIV weren't there at all?
Yes.
So there is no way to give an element a fixed, unchangeable starting
position and still have other elements flow around it?

I'm not sure what you're trying to accomplish but:

#parent {
border: 1px solid;
padding: 0.5em;
}
#fixed-start {
margin: 1em 1em 1em 2em;
border: 1px dashed;
padding: 0.5em;
float: left;
width: 7em;
}

<div id="parent">
<div id="fixed-start">bla-bla<br>.<br>.<br>...</div>
other content flows around<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>...
</div>

Does it work for you?

--
Stanimir

Jul 20 '05 #4