Div & float problem

[byte_eater]

Hi Guys!
I have a problem and have been struggling with it for past days...nothing logically come to my mind, so I'll hope maybe somebody of you could suggest anything! Thanks for your time!

So my problem is:

I have a div, that contain 8 other floated left divs. The main div has a background color, so what I need is that the main div to end where all the floated div's ends. In firefox i got this result ok, but in IE 6 it's height is amazingly determined by internet explorer itself.

here is the html code:

<div id="featured_homepage">
 <h3>Featured products</h3>
 
 <div class="product_space">
 Div content here #1
 </div>
 <div class="product_space">
 Div content here #2
 </div>
 <div class="product_space">
 Div content here #3
 </div> 
 <div class="product_space">
 Div content here #4
 </div>
 <div class="product_space">
 Div content here #5
 </div>
 <div class="product_space">
 Div content here #6
 </div>
 <div class="product_space">
 Div content here #7
 </div>
 <div class="product_space">
 Div content here #8
 </div> 
 
 <br class="clear" />
</div>

and the css for this part

 #content #main #featured_homepage {
 display: block;
 margin-left:-30px;
 margin-top: -18px;
 padding-top: 20px;
 padding-left: 25px;
 background: #292928 url(images/new/bg_featured.gif) repeat-y 0px 0px;
 color: #92948f; }

 #content #main #featured_homepage .product_space {
 width: 115px;
 margin-right: 10px;
 font-size: 11px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: #FFFFFF;
 float: left;}

 .clear {clear: both;}

Thanks for ur time!

[le_gber]

Does this do what you want:

<div id="featured">
<h3>Featured products</h3>
<ul>
<li>Content here #1</li>
<li>Content here #2</li>
<li>Content here #3</li>
<li>Content here #4</li>
<li>Content here #5</li>
<li>Content here #6</li>
<li>Content here #7</li>
<li>Content here #8</li>
</ul>
<p class="clear"></p>
</div>

#featured{
margin-left:-30px;
margin-top: -18px;
padding-top: 20px;
padding-left: 25px;
background: #292928 url(images/new/bg_featured.gif) 0 0 repeat-y;
color: #92948f;
}

#featured li{
list-style:none;
width: 115px;
margin-right: 10px;
font: 11px Arial, Helvetica, sans-serif;
color: #fff;
float:left;
}

.clear {clear: both;}

[byte_eater]

Thank you a lot!

This was the actual change that influence the rendering:
<p class="clear"></p>

But I'm not very enthusiastic about using it as a trick rather semantically!

I didn't do ul> li stuff because it's more like a div that contain images and text.... products and their description...

[le_gber]

Hi byte_eater

You can use <p> tags inside <li> tags, so semantically it is a list of featured products with descriptions and images :).

I would probably even put the image as a background image and have something along the lines of:

<ul id="featured">
<li id="p1"><a href="link.htm">Product Name 1</a> This is now the product description, bla, bla, bla</li>
<li id="p2"><a href="link.htm">Product Name 2</a> This is now the product description, bla, bla, bla</li>
<li id="p3"><a href="link.htm">Product Name 3</a> This is now the product description, bla, bla, bla</li>
...
</ul>

and in the CSS

#featured li{
display:inline;
width:155px;
height:120px;
padding-top:50px; /* this along with the height makes the box 170px high */
background-position:50% 0;
background-repeat:no-repeat;
}

#featured li a{
display:block; /* this makes the link stand alone on 1 line */
}

#p1{ background-image:url("/img/image1.jpg"); }
#p2{ background-image:url("/img/image2.jpg"); }
#p3{ background-image:url("/img/image3.jpg"); }