How to use float to get a gallery of thumbnails to evenly space each other.

Posted October 7, 2004

I am still learning the proper way to use the “float” property in CSS.

Until the other day, I was under the impression that you can do is float two objects side by side with either a “float:right” or “float:left”. But when I was rebuilding a section of our Online Show Management System the other day, I figured out that by setting a number of “div” layer blocks to float left, that they will align next to each other.

The other nice part of that is they will go down to the next line when they reach the boundary of their container. Let me demonstrate.

Here is my class;

div.container{

width:250px;

}

This previous class is the container I will use to set up my little example thumbnail gallery. Here is the container for the thumbnails;

div.thumb{

float:left;

width:30px;

height:30px;

border:5px solid #cccccc;

background-color:#3399cc;

margin-right:8px;

}

I have set up a background color and a border so you can see the benefits of setting up some of your design to take advantage of the super fast CSS markup. Plus, it makes it easy to see each of the thumbnails. I then setup a margin to the right of each of the thumbnails and the bottom so they aren’t right up against one another. Finally, don’t forget the float:left, which will allow each of these thumbs to push against each other, minus to margin.

Here it is;

This is useful is so many ways, but just remember that a float:left will stack against each other horizontally. But also, this works best with objects that are the same height, because otherwise, this will happen.

The div block will go to the next line, but hit the lowest dipping layer and stack accordingly. But like I said, useful no matter what direction you are floating.