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: ```

Thumbnail image here

.......... ETC

``` 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_3.html but with boxes centered horizontally on the page... thanks in advance,

Accepted Answer

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:

- Bind a javascript event to the `window.resize` event

- Get the new document width and see how many thumbnails would fit on one row

- 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.

Center float boxes horizontally

Solution

Problem