Simple box prob

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Jam Pa - 28 Apr 2005 12:26 GMT

Once again:

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

like this:

<div id="background">
<div id="menu"> </div>
<div id="content"> </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

Reply to this Message

Steve Pugh - 28 Apr 2005 14:33 GMT

> I have a 'background' div with two inline divs in it, 'menu' and 'content'.
>
[quoted text clipped - 7 lines]
> 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

Reply to this Message

Tony - 28 Apr 2005 17:16 GMT

> Once again:
>
[quoted text clipped - 14 lines]
> 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></div>
<div class="centercolumn></div>
<div class="rightcolumn></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.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2005

Simple box prob