Complex Grid Example

complex grid with CSS

HTML

<div class="container clearfix">

  <div class="grid1 first">
    grid1
  </div>
  <div class="grid11">
    grid11
  </div>

  <div class="grid2 first">
    grid2
  </div>
  <div class="grid10">
    grid10
  </div>

  <div class="grid3 first">
    grid3
  </div>
  <div class="grid9">
    grid9
  </div>

  <div class="grid4 first">
    grid4
  </div>
  <div class="grid8">
    grid8
  </div>

  <div class="grid5 first">
    grid5
  </div>
  <div class="grid7">
    grid7
  </div>

  <div class="grid6 first">
    grid6
  </div>
  <div class="grid6">
    grid6
  </div>

  <div class="grid3 first">
    grid3
  </div>
  <div class="grid3">
    grid3
  </div>
  <div class="grid1">
    grid1
  </div>
  <div class="grid5">
    grid5
  </div>

  <div class="grid1 first">
    grid1
  </div>
  <div class="grid5">
    grid5
  </div>
  <div class="grid3">
    grid3
  </div>
  <div class="grid3">
    grid3
  </div>

  <div class="grid3 first">
    3
  </div>
  <div class="grid9">
    <div class="grid3 first">3</div>
    <div class="grid3">3</div>
    <div class="grid3">3</div>
    <div class="grid5 first">5</div>
    <div class="grid2">2</div>
    <div class="grid2">2</div>
  </div>

  <div class="grid8 first">
    <div class="grid3 first">3</div>
    <div class="grid3">3</div>
    <div class="grid2">2</div>
    <div class="grid1 first">1</div>
    <div class="grid1">1</div>
    <div class="grid6">6</div>
  </div>
  <div class="grid4">
    4
  </div>

</div>

CSS

body {
  font: 12px/140% Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 40px auto;
}

.container {
  width: 978px;
  margin: 0 auto;
}

.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11 {
  float: left;
  display: inline;
  margin-left: 30px;
}

.grid1 {
  width: 54px;
}

.grid2 {
  width: 138px;
}

.grid3 {
  width: 222px;
}

.grid4 {
  width: 306px;
}

.grid5 {
  width: 390px;
}

.grid6 {
  width: 474px;
}

.grid7 {
  width: 558px;
}

.grid8 {
  width: 642px;
}

.grid9 {
  width: 726px;
}

.grid10 {
  width: 810px;
}

.grid11 {
  width: 894px;
}

.first {
  margin-left: 0;
  clear: left;
}

/* clearfix */

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}

/* IE6 */

*:first-child+html .clearfix {
  zoom: 1;
}

/* IE7 */

/* NOTE: the following styles are for demo purpose (not required) */

.container {
  background: url(978-grid-bg.png) repeat-y;
}

.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11 {
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  background: rgba(255, 0, 0, .2);
  border: solid 1px #999;
  border-width: 1px 0;
}