nested divs height - newbie question

Hi,

my problem seems to be quite simple but i haven't found the answer yet:

i have one outer div containing two absolutely positioned inner divs.
The height of the inner divs varies on the amount of content. Now the
outer div's height should grow with the inner divs' height. how can this
be achieved?

example: http://www.bernd-liebermann.de/css_test.php

Thanks for your help!

Bernd Liebermann

Bernd Liebermann wrote:

i have one outer div containing two absolutely positioned inner divs.
The height of the inner divs varies on the amount of content. Now the
outer div's height should grow with the inner divs' height. how can this
be achieved?

example: http://www.bernd-liebermann.de/css_test.php

Absolutely positioned elements do not consume any layout space thus the
inner divs will not add to the height of the outer div.
Maybe you can achieve what you want by simply floating the inner divs.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Martin Honnen <mahotrash (AT) yahoo (DOT) de> wrote:

Bernd Liebermann wrote:


i have one outer div containing two absolutely positioned inner divs.
The height of the inner divs varies on the amount of content. Now the
outer div's height should grow with the inner divs' height. how can this
be achieved?

example: http://www.bernd-liebermann.de/css_test.php

Absolutely positioned elements do not consume any layout space thus the
inner divs will not add to the height of the outer div.
Maybe you can achieve what you want by simply floating the inner divs.

Martin makes a good point. I was able to achieve what (I think)
you're after simply by making the .inner_left div's position relative
(as opposed to absolute) and un-positioning .inner_right:

div.outer {
border: solid black thin;
width: 500px;
}

div.inner_left {
position: relative;
left: 10px;
width: 200px;
height: 200px;
background-color: red;
}

div.inner_right {
#position: absolute;
left: 220px;
width: 270px;
background-color: yellow;
}

Hope it helps.

-dave.

--
Dave Sisley
dsisley (AT) sonic (DOT) net
roth-sisley.net

Dave Sisley wrote:

Martin Honnen <mahotrash (AT) yahoo (DOT) de> wrote:


Bernd Liebermann wrote:



i have one outer div containing two absolutely positioned inner divs.
The height of the inner divs varies on the amount of content. Now the
outer div's height should grow with the inner divs' height. how can this
be achieved?

example: http://www.bernd-liebermann.de/css_test.php

Absolutely positioned elements do not consume any layout space thus the
inner divs will not add to the height of the outer div.
Maybe you can achieve what you want by simply floating the inner divs.



Martin makes a good point. I was able to achieve what (I think)
you're after simply by making the .inner_left div's position relative
(as opposed to absolute) and un-positioning .inner_right:

No, that will not do it and is not what Martin suggested. With your way,
the div.inner_right is rendered below the div.inner_left which is not
what is requested.

Try the float method applied to div.inner_left and a margin-left to
div.inner_right:

div.outer {
border: solid black thin;
width: 500px;
}

div.inner_left {
float:left;
width: 200px;
height: 200px;
background-color: red;
}

div.inner_right {
margin-left:220px;
width: 270px;
background-color: yellow;
}

--
Gus

Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

Dave Sisley wrote:

No, that will not do it and is not what Martin suggested. With your way,
the div.inner_right is rendered below the div.inner_left which is not
what is requested.

Try the float method applied to div.inner_left and a margin-left to
div.inner_right:

div.outer {
border: solid black thin;
width: 500px;
}

div.inner_left {
float:left;
width: 200px;
height: 200px;
background-color: red;
}

div.inner_right {
margin-left:220px;
width: 270px;
background-color: yellow;
}

You're (sort of right). I think I may have posted too soon (again). I
just installed the web developer extention for firefox and tried my
solution there, editing the text.

It looked great from there: both of the inner divs were contained
within the border of the outer.

But of course when I actually tried hacking the original page, my
solution looked terrible. As you note, the yellow div (.inner_right)
is displayed below the red one (.inner_left).

I can't get your solution to work either, though. Am I missing
something?

--
Dave Sisley
dsisley (AT) sonic (DOT) net
roth-sisley.net

Gus Richter wrote:

Dave Sisley wrote:

Martin Honnen <mahotrash (AT) yahoo (DOT) de> wrote:


Bernd Liebermann wrote:



i have one outer div containing two absolutely positioned inner
divs. The height of the inner divs varies on the amount of content.
Now the outer div's height should grow with the inner divs' height.
how can this be achieved?

example: http://www.bernd-liebermann.de/css_test.php


Absolutely positioned elements do not consume any layout space thus
the inner divs will not add to the height of the outer div.
Maybe you can achieve what you want by simply floating the inner divs.


Hi guys,

thanks for all your replys. Meanwhile i've found my own solution by
positioning both inner divs relatively, defining a fixed height for the
left box and setting the right div's top property to = -(height of the
left div). Works here, as only the height of the right box varies.

My first idea that the outer box should grow with the height of the
inner boxes, no matter of the positioning scheme, still seems very
intuitive to me and it's irritating that this is not the case. I
understand that absolutely positioned elements are withdrawn from the
normal element flow on sibling level, but to me it's somewhat
counterlogical, that they don't consume layout space with regard to
their containing element. But, this is how it is, so I have to live with it.

Thanks again for your help.

Bernd Liebermann

Martin makes a good point. I was able to achieve what (I think)
you're after simply by making the .inner_left div's position relative
(as opposed to absolute) and un-positioning .inner_right:


No, that will not do it and is not what Martin suggested. With your way,
the div.inner_right is rendered below the div.inner_left which is not
what is requested.

Try the float method applied to div.inner_left and a margin-left to
div.inner_right:

div.outer {
border: solid black thin;
width: 500px;
}

div.inner_left {
float:left;
width: 200px;
height: 200px;
background-color: red;
}

div.inner_right {
margin-left:220px;
width: 270px;
background-color: yellow;
}

Bernd Liebermann wrote:

thanks for all your replys. Meanwhile i've found my own solution by
positioning both inner divs relatively, defining a fixed height for the
left box and setting the right div's top property to = -(height of the
left div). Works here, as only the height of the right box varies.

Using position:relative for both 'left' and 'right' and a negative 'top'
value for the 'right' to position it to the top of 'left' works as far
as it does, but the height of the 'outer' box still includes the
original position of the 'right'. The extended height of 'outer',
depending on the height of 'right', will interfere with the flow by
causing overlapping of subsequent material. All subsequent material will
have to have compensation applied.
In other words, you move the 'right' box up, but the 'outer' box retains
its height as where the 'right' originally was' before you moved it.

My first idea that the outer box should grow with the height of the
inner boxes, no matter of the positioning scheme, still seems very
intuitive to me and it's irritating that this is not the case. I
understand that absolutely positioned elements are withdrawn from the
normal element flow on sibling level, but to me it's somewhat
counterlogical, that they don't consume layout space with regard to
their containing element. But, this is how it is, so I have to live with
it.

Using position:absolute for both 'left' and 'right' removes them both
out of the flow. The only content inside 'outer' is the preceding text.

--
Gus

Dave Sisley wrote:

But of course when I actually tried hacking the original page, my
solution looked terrible. As you note, the yellow div (.inner_right)
is displayed below the red one (.inner_left).

An absolutely positioned div without positioning applied (i.e. top &
left), will be rendered at the point of flow. In your example, no
vertical positioning is declared, so it is positioned in flow.

A point of note is that top and left are in reference to the viewport
which is the canvas. If 'outer' is a declared as a relatively positioned
div, then it will be the viewport for the 'right' div and the top/left
references will be to the top/left of the 'outer' div.

I can't get your solution to work either, though. Am I missing
something?

It WFM in Moz/FF, Opera and IE. You must be creating an error. Try copy
and paste.

--
Gus

Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

Dave Sisley wrote:

I can't get your solution to work either, though. Am I missing
something?

It WFM in Moz/FF, Opera and IE. You must be creating an error. Try copy
and paste.

Of course, trying it yet again, I got it to work as you describe. Thanks.

-dave.

--
Dave Sisley
dsisley (AT) sonic (DOT) net
roth-sisley.net