960gs issue on columns

Question

I want to make a page like this in 960 gs 12 col What to design

I wrote html:

<div class="container_12">
    <div class="grid_6"><img src="images/x.jpg" /></div>
    <div class="grid_6"><img src="images/x.jpg" /></div>

    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1 suffix_6"><img src="images/x.jpg" /></div>
</div>

but this looks like this: what is showing

any idea, how to do this?

score 2 · Accepted Answer · answered Apr 23 '12 at 14:02

Each grid will have a margin and is displayed as inline. You will need to put each set of divs into a separate column and use the alpha omega classes to remove the margins on the first/last divs respectively.

<div class="container_12">
  <div class="grid_6">
      <div class="grid_6 alpha omega"><img src="images/x.jpg" /></div>
      <div class="grid_1 alpha"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1 omega"><img src="images/x.jpg" /></div>
  </div>
  <div class="grid_6">
  <img src="images/x.jpg" />
  </div>
</div>

960gs issue on columns

1 Answers1