1

I am new to the 960 grid and adaptive.js.

I understand the concepts and have successfully implemented the 960 grid. My problem is that I am not understanding how to implement the "adaptive" part.

Here is my code

<div class="container_12">
       <div id="container1" class="grid_3"></div><!--end grid_3 -->
       <div id="container2" class="grid_7"></div><!--end grid_7 -->
       <div id="container3" class="grid_2"></div><!--end grid_2 -->
</div><!--end container>

This works great for 1200.css, but for 960.css I would like container2 to be a grid_9 and container 3 to drop to the next "row" and be a grid_12: see this image: [adaptive example] https://docs.google.com/open?id=0BzR0r0y6_XGgMHZQNm9kcDJvNFU

<div class="container_12">
       <div id="container1" class="grid_3"></div><!--end grid_3 -->
       <div id="container2" class="grid_9"></div><!--end grid_9 -->
           <div class="clearfix"></div>
       <div id="container3" class="grid_12"></div><!--end grid_12 -->
</div><!--end container>

I know adaptive can do style overrides,

.foobar {
   /* Default styles here. */
 }

html.range_0 .foobar {
   /* Style overrides for: 0px to 760px */
}

html.range_1 .foobar {
  /* Style overrides for: 760px to 980px */
}

but this won't work, right?

Any guidance is much appreciated.

Thanks.

user1689870
  • 11
  • 3

1 Answers1

0

You can never have more than 12 grids in the same container. Your first example is working because you have the below structure:

grid_3
grid_7
grid_2

This equals 12, right?

In your other example you have

grid_3
grid_9
grid_12

This equals 24. And it can't, it has to equal 12 because you only have 12 columns to work with. Grids are just percentages of the full container. If you have the blow markup:

 <div class="container_12">
       <div class="grid_3"></div>
       <div class="grid_3"></div>
       <div class="grid_3"></div>
       <div class="grid_3"></div>
</div><!--end container>

Every grid_3 is 25% of the full container width.

Albin N
  • 1,401
  • 2
  • 16
  • 27