twigkit/semantic.gs — Issue #41: Rounding error in .column() function width calculation
Author: bridgeport
Created: 2012-01-22 08:03:49+00:00
State: open

Thanks for semantic.gs. It's great.

I was looking at the "Less Framework 4" which, if combined with semantic.gs, would use the following variable settings:
```@columns: 10;
@column-width: 68;
@gutter-width: 24;
```

The problem is the width calculation that's implemented would render this less code:
```div {
.column(3);
}```

as this:
```div {
display: inline;
float: left;
width: 251.99999999999997px;
margin: 0 12px;
}```

as you can see, the width should be 252px. Just to put the above in perspective, here's how column 1-10 is calculated:
```div {
width: 68px;
width: 160px;
width: 251.99999999999997px;
width: 344px;
width: 436px;
width: 528px;
width: 620px;
width: 712px;
width: 804px;
width: 896px;
}```

I was able to work around this by modifying the width calculation to the following:
```width: (((@gutter-width + @column-width) * round(@x)) - @gutter-width) * (@total-width / @gridsystem-width)```

I'm using the latest lesscss version which has a round() function that corrects it. There's probably a better way to do the above mathematically, but it seems to work.