FF div

[zoobie]

Can anyone see why FF doesn't include the images within the <div class="main"> with the gold border?
http://buskeralley.com/features.php
I really want it to shrinkwrap and the height not defined since every page is different.

my css

body {font: normal 17px tahoma verdana "courier new" arial; color: #efcb89; text-align:center; margin: 0px; padding: 5px; height: 100%; background-color: #000000}
.main {width: 86%; border: 1px #efcb89 solid; margin: 0px auto; padding: 10px;}
p {text-indent: 20px; text-align: left; margin:3px}
.cell_l {float: left; width: 45%; font: bold 13px arial;margin-left: 2%; margin-bottom: 25px;}
.cell_r {float: right; width: 45%; font: bold 13px arial; margin-right: 2%; margin-bottom: 25px;}
.cell_c {text-align:center; width: 45%; font: bold 13px arial; margin:auto}
.thumb {cursor: pointer; border: 0px; margin: 0px; padding: 0px; width: 282px; height: 217px}
.thumb_cat {cursor:pointer; border: 0px; width: 90px; height: 90px}
a.menu {font: bold 12px tahoma; color: #000000; vertical-align: middle}
.sm {font: bold 11px tahoma}
a {font: bold 11px tahoma; color: #efcb89}
h1 {margin: auto; font: bold italic 28px "times new roman"; color: #efcb89}
h2 {margin: 0px; padding: 0px; font: bold 16px tahoma; color: #efcb89}

.spacer {margin-top: 150px}


Where did I goof?
Thx

[Kravvitz]

IE wrongly makes containers fully contain floated elements. You need to use a clearing method to make other browsers make containers fully contain floated elements.

I recommend clearing options 1 and 2 listed on this page (http://css-discuss.incutio.com/?page=ClearingSpace).
More information:
http://garyblue.port5.com/webdev/floatdemo.html
http://www.quirksmode.org/css/clearing.html

[zoobie]

Weird...I had already tried clear: both but nothing happened. Anyway, the overflow: auto worked. I remember using this to hide the scrollbar when used on the body tag.
Thanks