div/span display quickie

[e1seix]

not really the most adept at display:bock etc. so i need some help here. my webpage consists of the following - 2 vertical rows

 

echo '<div id="container">';

    echo '<div id="leftContent"> </div>';
    echo '<div id="centerContent">';
	include("../cols/byBrand.php");
    echo '</div>';
    echo '<div id="rightContent"> </div>';

echo '</div>';
echo '<div id="footer">Copyright 2009 etc. etc.</div>';

 

with

 

#container { background-color:#ff0000;display:block;height:auto;margin:0 auto;padding-top:5px;padding-bottom:5px;width:900px; }

#centerContent { background-color:#ffff00;float:left;margin-left:10px;width:500px; }
#leftContent { background-color:#ffff00;float:left;width:200px; }
#rightContent { background-color:#ffff00;float:left;margin-left:10px;width:180px; }

#footer { background-color:#00ff00;color:#ffffff;display:block;font-family:verdana;font-size:10px;font-weight:normal;margin:0 auto;padding-bottom:5px;padding-top:5px;width:900px; }

 

right, so esentially two horizontal rows "container" and "footer" to sit one on top of another and within "container" 3 different vertical columns "center...", "left..." and "rightContent".

 

i am trying to have the "container" div to be just tall enough to cover the height of the biggest column - the columns will be variable... but the text from the "footer" div which should be as a block directly under the "container" div which should also be a block - is creeping up to appear below the "rightContent" div as it#s not the tallest.

 

i can't seem to lock the "container" tag as a block - ONLY IN FIREFOX IT MUST BE SAID.

 

can someone help me out here?

 

have tried height:auto, changing the divs to spans and adding display:block.

 

the html source shows it is correctly contained so i'm confused...

[ToonMariner]

try giving the container div overflow: hidden.

 

Also this old beauty which I still find useful...

http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute

[SuperBlue]

Let me add, you will find it easier to excape in and out of PHP, example below.

<p><?php
echo 'hallo';
?></p>

 

It looks like you are trying to make a equal-height 3 column layout with a footer, well Absolute Positioning is very powerful, and much easier to work with. But do tend to make it hard to have a footer which spans over all the columns.

 

You might want to have a look on these examples:

Equal Height Columns using Floats

Position based Equal-height Columns Technique.

 

 

Also note, floated inline elements automatically become block level elements, you just need to clear your floats to have more "rows", or get the next element to render below the floated element.