By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
/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

P: n/a
> 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

P: n/a
/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

This discussion thread is closed

Replies have been disabled for this discussion.