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