[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 235
  • Last Modified:

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?
0
cipiWeb
Asked:
cipiWeb
  • 3
  • 2
1 Solution
 
GrandSchtroumpfCommented:
use the "clear" property:

<div style="clear:left">Text that is supposed appear below thumbnails.</div>
0
 
cipiWebAuthor Commented:
Thank You, I'll try testing that out.

What does the clear property do? I like to understand how what I am using works.
0
 
GrandSchtroumpfCommented:
Here is a CSS reference guide:  http://www.htmlhelp.com/reference/css/box/clear.html
0
 
cipiWebAuthor Commented:
Thank you very much. It works Perfectly.
0
 
GrandSchtroumpfCommented:
:)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now