Center aligned floating blocks

I am trying to figure out how to have a fluid template that can contain center aligned float blocks. I think the following images shows how it should work.

The template is fluid and can be resized. The floating boxes will cover the width of the screen and the remaining ones will be center aligned.

If user resizes th开发者_如何学JAVAe window, the remaining floating boxed will be still center-aligned.

I am not sure how to achieve this using CSS (only perhaps) or with jQuery?

---

http://jsfiddle.net/VpLGf/ that works for me in chrome 13

it should work in all "modern" browsers except IE5.5, IE6 and IE7

What you basically want here is a set of elements that are displayed inline or look as if inline with using a float. You also want the elements to behave like they are a block because you want them to take up the space assigned to them, not just fit(with no content the inline but not block elements would just be invisible)

given the html:

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

and css

.block{
  width: 100px;
  height: 100px;
  background-color: black;
  margin: 20px;
}

so a solution could be either to give the div.block a float: left or to give them a display: inline-block;

Now the elements still need to be aligned in the middle of the page. With the float:left solution this is impossible since all the elements align left no matter what (they escape the "normal" document flow), with the display: inline-block however, you can put the parent on text-align: center and it all lines up like you want

---

This is only a guess - but I believe that if each box is a <span> with the last line only being set within another span of <span style="margin: 0 auto"></span> this may achieve what you want.

So the boxes on the bottom line will be <span> within the other span with the style set.

I'm only throwing this out there in the hope others can edit the answer to be more precise / correct.