Simple box prob

[Jam Pa]

Once again:

I have a 'background' div with two inline divs in it, 'menu' and 'content'.

like this:

<div id="background">
<div id="menu"><!-- menu contents of 15-20 lines --> </div>
<div id="content"><!-- text contents of 15-20 lines --> </div>
</div>
How would you ensure that the background box 'stretches' to accomodate
both?

ATM my content does stretch the background, but if it only contains a few
lines of text, the menu is 'taller' and flows tight outside the background
box.
jp

[Steve Pugh]

Jam Pa wrote:

I have a 'background' div with two inline divs in it, 'menu' and 'content'.
like this:

<div id="background">
<div id="menu"><!-- menu contents of 15-20 lines --> </div>
<div id="content"><!-- text contents of 15-20 lines --> </div>
</div>
How would you ensure that the background box 'stretches' to accomodate both?

Presumably your menu is left floated?

Make sure that you have an element with clear: left set after the end
of both the content and the menu but before the end background box.

Steve

[Tony]

"Jam Pa" <an******@non-anon.org> wrote in message
news:Xn**********************************@213.243. 153.2...

Once again:

I have a 'background' div with two inline divs in it, 'menu' and
'content'.

like this:

<div id="background">
<div id="menu"><!-- menu contents of 15-20 lines --> </div>
<div id="content"><!-- text contents of 15-20 lines --> </div>
</div>
How would you ensure that the background box 'stretches' to accomodate
both?

ATM my content does stretch the background, but if it only contains a few
lines of text, the menu is 'taller' and flows tight outside the background
box.

I recently had the same problem. I wound up with these settings:

div.middlerow { position:relative; width:100%; height:100%; display:inline }

div.leftcolumn { width:15%; height:100%; vertical-align:top; display:inline;
position:relative }

div.centercolumn{ width:65%; height:100%; display:inline;
vertical-align:top; position:relative }

div.rightcolumn { width:20%; height:100%; display:inline;
vertical-align:top; position:relative }

Then in the document:

<div class="middlerow">
<div class="leftcolumn><!--stuff here--></div>
<div class="centercolumn><!--stuff here--></div>
<div class="rightcolumn><!--stuff here--></div>
</div>

I don't know if that's the best solution, but it worked. The three middle
columns always remain the same height relative to each other.