CSS height expanding inner DIV

[ryanmhuc]

What I would like is to create an inner div (inner1) which will expand
vertically (or the height) to its outer div container (outer). The
outer div does not have a set height but will expand when another div
(inner2) inside outer expands vertically with content. I cannot seem to
get a div to expand vertically when the outer div is NOT set to expand
100%. Anyone know how to do this. I've placed the code below.
<style type="text/css">
/* commented backslash mac hiding hack \*/
..outer {
border: 1px solid #006600;
}
..inner1{
border: 1px solid #CC0000;
padding: 6px;
float: left;
}

</style>
<div class="outer">
<div class="inner1">asdf</div>
<div class="inner2">
asdfasfd<BR />
asdfasdf<BR />
asdf
</div>
</div>

[Els]

ry******@yahoo.com wrote:

What I would like is to create an inner div (inner1) which will expand
vertically (or the height) to its outer div container (outer). The
outer div does not have a set height but will expand when another div
(inner2) inside outer expands vertically with content. I cannot seem to
get a div to expand vertically when the outer div is NOT set to expand
100%. Anyone know how to do this.

Not possible afaik.

I've placed the code below.

[snip]

Looks like you just want equal height columns, like many other people
do too. If your div.inner2 is always taller than div.inner1, it's easy
to fake. Give div.inner2 a left margin, the same width as div.inner1.
Then give div.inner1 the same background colour as div.outer, and
div.inner2 a different one.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[ryanmhuc]

No that will not work for this situation. I will be adding a background
image to inner1. Inner1 needs to stretch to the height of inner2 (the
height of inner1 & inner2's container - outer). Faking it won't work
because the background image will not be shown. I cannot place the
background image in outer either for reasons to complicated to discuss.
Els wrote:

ry******@yahoo.com wrote:

What I would like is to create an inner div (inner1) which will expand
vertically (or the height) to its outer div container (outer). The
outer div does not have a set height but will expand when another div
(inner2) inside outer expands vertically with content. I cannot seem to
get a div to expand vertically when the outer div is NOT set to expand
100%. Anyone know how to do this.

Not possible afaik.

I've placed the code below.

[snip]

Looks like you just want equal height columns, like many other people
do too. If your div.inner2 is always taller than div.inner1, it's easy
to fake. Give div.inner2 a left margin, the same width as div.inner1.
Then give div.inner1 the same background colour as div.outer, and
div.inner2 a different one.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Els]

ry******@yahoo.com wrote:

[equal height columns]

No that will not work for this situation. I will be adding a background
image to inner1. Inner1 needs to stretch to the height of inner2 (the
height of inner1 & inner2's container - outer). Faking it won't work
because the background image will not be shown. I cannot place the
background image in outer either for reasons to complicated to discuss.

I was indeed gonna say "place it in div.outer", but if the reasons not
to are too complicated to discuss, there's not much I can discuss then
:-)

Except perhaps on the topic of top-posting. Would you please reply
below the pieces of text you are replying to, and snip what isn't
relevant anymore?

Thanks :-)
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/