asked on

CSS Float & Display Issue

I have thumbnails set up in a div box "smBox":

.smBox {
                  text-align: center;
                  margin-bottom: 5px;
                  margin-left: 0px;
                  margin-right: 5px;
                  margin-top: 0px;
                  width: 135px;
                  height: 170px;
                  float: left;
                  background-color:#999999;
            }

<div class="smBox">
      <div class="product1Box">
            <a href="productview.asp?ProdNUM=3905-0150"><img src="productImages/3905-0150.jpg" border="0" alt="Vertical All-Metal ID Badge Rack 3905-0150" /></a>
      </div>
      <a class="thumbText" href="productview.asp?ProdNUM=3905-0150">Vertical All-Metal ID Badge Rack<br />3905-0150</a>
</div>

They float left so that the contents flows and fills up the browser window (width allowing), even as the window is resized.

The problem is that any text that comes after this box is not starting below the box. You might think "well that's supposed to happen, its floating." no its not. I have all of my thumbs encased by another div... which is supposed to be a block element. I dont understand why the text appears to the right of the last box rather than beneath it.

<div>
<div class="smBox">Content</div>
<div class="smBox">Content</div>
<div class="smBox">Content</div>
<div class="smBox">Content</div>
<div class="smBox">Content</div>
<div class="smBox">Content</div>
</div>
Text that is supposed appear below thumbnails.

I have tried assiging the containing div a display: table-row. It seems to work in firefox( but I can't shake the feeling its the wrong syntax/usage). When I check it in IE, it seems IE has Issues with display: table-row. Even if I put another div inside with display:table-cell.

Help?

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cipiWeb

ASKER

Thank You, I'll try testing that out.

What does the clear property do? I like to understand how what I am using works.

GrandSchtroumpf

Here is a CSS reference guide: http://www.htmlhelp.com/reference/css/box/clear.html

cipiWeb