CODEWITHSUNDEEP
htmlcssfluid-layout
talkpoppycock
talkpoppycock

Reputation: 147

CSS Fluid Grid of Fixed Sized Boxes

So far I have a fluid grid of equal sized boxes. At a screen width of 800px or greater there are two rows of four blue boxes centred on screen, as shown here. The code is as follows:

<style type="text/css">
body {width:100%; min-height:100%;}

#content {width:100%; max-width:800px; margin:0 auto;}

.box { float: left; display: table; height: 180px; 
      width: 180px; margin:10px; background-color:blue;}
</style>

<body>
   <div id="content">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
</body>

As the screen width is reduced, the boxes stay the same size, the number of boxes per row reduced and they drop down into more rows. All of which is exactly what I want. The only problem is that as the screen width is reduced the boxes become left justified.

I would like the remaining rows to be centred. Can anyone help?

Upvotes: 2

Views: 7462

Answers (1)

Nick R
Nick R

Reputation: 7784

One way to do it would be:

  • Change the display on .box to display: inline-block; instead of table.
  • Remove the float:left on the .box
  • Add text-align:center to the #content div.

Example - http://jsfiddle.net/QxhUs/3/

CSS

#content {
    width:100%;
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

.box {

    display: inline-block;
    height: 170px;
    width: 170px;
    margin:10px;
    background-color:blue;
}

Upvotes: 7

Related Questions