2

I've created a 16 column layout with 960gs with a div class="grid_12" (main) and after that grid_4 (right) (12+4...) Inside that grid_12 I wanted a three column style (3 pcs. grid_4). But the grid_4 boxes don't fit inside the grid_12, the last box drop into a second row.

Shouldn't the 960gs framework be able to do this layout for me, have i missed anything?

Thanks in advance.

<div class="container_16">
...
<div id="main" class="grid_12">
 <div class="grid_12">
   <div class="grid_4"></div>
   <div class="grid_4"></div>
   <div class="grid_4"></div>
 </div>

 <div id="right" class="grid_4">

 </div>
</div>
...
</div>
Olle
  • 201
  • 6
  • 17

1 Answers1

3

Found out that I needed to add alpha and omega classed to the first and last grid_4 box. Now it works.

<div id="main" class="grid_12">
    <div class="grid_4 alpha">

    </div>
    <div class="grid_4">

    </div>
    <div class="grid_4 omega">

    </div>
</div>
Olle
  • 201
  • 6
  • 17
  • Also for anyone stumbling here, be careful about something like "border:1px solid;" on the divs, they will increase the width of the div by +2 px and it will cause the same symptom described. You run into the same problem with padding. The solution for that is to add divs inside your grid_x divs, and apply the border or padding to those inner divs. – Purrell Jan 24 '11 at 02:55
  • or alternatively - use outline instead of border, it doesn't affect the width. – Daniel Alexiuc Oct 04 '12 at 05:51