Margins to shift boxes evenly

Question

I have this code:

<style type="text/css">
    body > div { height: 260px; overflow: hidden; }
    div div { float: left; height: 250px; width: 250px; margin: 1px; background: #ccc; }
</style>

<div>
    <div>first 1</div>
    <div>first 2</div>
    <div>first 3</div>
    <div>first 4</div>
    <div>first 5</div>
</div>

I wonna give margins to this boxes to shift them evenly.

Answer 1

Since the width of the container is unknown, and the width of the divs is fixed in pixels (ruling out a percentage based system) - you can't do this with CSS.

You could centre them using the technique described at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support or you could look towards JavaScript (or you could set the width of the parent element to a known value).