Center float boxes horizontally

Question

I want to display some floating boxes (divs containing thumbnails) and the number of thumbnails depends on the current page width. For example:

<div class="container">
  <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
    .......... ETC
</div>

the problem is that for a given width it shows for example 4 boxes on each row, but they are all left aligned and there is some white space to the right, how can i center horizontally for each row??

Something like this: http://realworldstyle.com/thumbs%5F3.html but with boxes centered horizontally on the page...

thanks in advance,

Answer 1

I think the only way to get the elements centered is to work not with float, but setting the images display: inline. That way, you can align them at will using the parent container's text-align property.

But that will give you additional issues with vertical margins and setting height. But as far as I know, it's the only reliable cross-browser way as long as inline-block is not widely supported.

Answer 2

Sorry, but will not be able to do what you are wanting with straight CSS + HTML. (Take a look at @Pekka for an alternative, though if the row of thumbnails don't fill the whole row, they would be centered by themselves on the last row)

You would need to have a fixed width on the parent object .container with margin-left: auto and margin-right:auto which you cannot do since it is a fluid width page.

Here is how I would go about doing it, though it is sure to have some bugs you will need to work around:

1. Bind a javascript event to the window.resize event
2. Get the new document width and see how many thumbnails would fit on one row
3. Set the width of the div.container to be that width plus the little bit of margin on the right. This div would always have a margin-left and margin-right of auto

This will center the thumbnails as best as possible. Depending on your visual display, you may need an additional wrapping div to provide the 100% width background.

Answer 3

Use an unordered list with inline list elements:

HTML:

<ul>
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
</ul>

CSS:

ul {
    width: 960px;
    text-align: center;
}

ul li {
    display: inline;
}

That'll do as long as you don't have block-level elements inside the LI elements. Works also if you have more than one row of images ;) You can also use div's but using a list is semantically much more nicer.

Answer 4

inline-block and auto margins on .container should do the trick for most browsers with perhaps text-align:center on body as well.

And if IE6 and IE7 don't play nice, you can always use javascript / jquery to wrap the whole thing in a table just for them.

Mind you, I wouldn't dare suggest a table solution for normal browsers, although it obviously works flawlessly ;-)