is bootstrap less mixin .makeColumn smaller than a span? - html

Question

I'm using bootstrap with less and I'm currently trying to make web semantic.
HTML part:
<!-- our new, semanticized HTML -->
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
Less part:
/* its accompanying Less stylesheet */
.article {
.makeRow(); // Mixin provided by Bootstrap
.main-section {
.makeColumn(10); // Mixin provided by Bootstrap
}
.aside {
.makeColumn(2); // Mixin provided by Bootstrap
}
}
But when I take a look at the rendered html page... my article take less space than a span12
I can also put a .makeColumn(10) and .makeColumn(4) and it will stay on the same line.
It's like it was a 14 grid column and not a 12 grid column.
Am I missing something?

Answer 1

No. If your required number of columns is n, the .makeColumn mixin and the .span (#grid > .core > .span) mixin both calculate width as follows:
(#gridColumnWidth * n) + (#gridGutterWidth * (n-1))
which is the width you'll need to set your element to a width of n columns on the grid.
If n = 6, it calculates all column widths and gutter widths from the left edge of your grid to the right-hand edge of column 6. 6 columns and 5 gutters.
.span only does width, .makeColumn also adds a float: left, and has an optional #offset argument that which isn't important to your current problem, but which allows you to add columns to the left of the element by adding a margin: left.
As #sody says above, wrapping your existing elements in a .container should fix your problem.
And I agree with #kleinfreund on using the html elements where you can:
<div class="container">
<article>
<div class="main-section">Bootstrap rocks
<aside>
By the way...
</aside>
</div>
</article>
</div>
I hope that helps.