semantic.gs GRID - questions about the columns adding to more than 12

Question

I have searched everywhere for an answer. I am using grid.less from semantic.gs and works fine. I am just having an issue with one section of my template. I understand that the grid columns add up to 12 by default. However, for one particular section of my template, the layout is not expanding accross the full width of the screen.

HTML The layout is 3 divs

    <div id="about">
        <h3>About</h3>

    .....

    </div>

    <div id="contact">
      <h3>Contact</h3>

       ....
    </div>


    <div id="locations">
      <h3>Locations</h3>
      .......
    </div>  

</section><!-- #bottom-->

style.less

@import "components/grid.less"; In order to use the full width of the screen, I had to increase the # of columns for the 2 last divs.

bottom {

#about {
 .column(6);
}

#contact {
  .column(4);

}

#locations {
 .column(4);

}

Although, it seems that now it adds up to 16 columns (6+4+4 and I have not changed the default @columns:12). While the rendition in the browser is still fine, I am wondering why I could not simply use column(3); for the 2 last divs. Unless I am missing sthg, it does not seem consistent otherwise. I wish I could figure out why.

Thanks in advance

Answer 1

6 + 4 + 4 = 14 and not 16. I do not understand why you can not use column(3) for your last divs? What happens when doing that?

To understand the grid system, you should inspect http://semantic.gs/examples/fixed/fixed.html

The grid system use hard code widths. Each row has 12 columns of 960 / 12 pixels = 80 pixels (including a margin of 10 pixels on each side (giving a gutter of 2 x 10 = 20px )).

The grid requires that you wrap your rows in a container. The example mentioned above uses a <div class="center"></div> container. The Less code for the div.center container will be:

// center the contents
div.center {
    width: ((@column-width + @gutter-width) * @columns)px;//960px by default
    margin: 0 auto;
    overflow: hidden;
}

When you don't use a container with a fixed width, all your columns will be displayed next to each other till the sum of their widths equals the screen width (or width of the viewport) due to the float:left.