1

I was looking at the Skeleton framework (getskeleton.com), but I wanted a fluid grid system. I'm also interested in the inner workings of these grids, so I decided to roll my own.

However, I'm running into trouble with the two.columns percentages. All other column widths work fine. First of, here's what's happening:

enter image description here

There's clearly something wrong with the second row, and I really can't figure out what it is.

My code for this layout is as follows:

   $max-width: 600px;

   .container {
     @include container($max-width);

     .column, .columns {
       @include columns($max-width);
     }

     .one.column, .one.columns  { width: perc(30px, $max-width); }
     .two.columns               { width: perc(80px, $max-width); }
     .three.columns             { width: perc(130px, $max-width); }
     .four.columns              { width: perc(180px, $max-width); }
     .five.columns              { width: perc(230px, $max-width); }
     .six.columns               { width: perc(280px, $max-width); }
     .seven.columns             { width: perc(330px, $max-width); }
     .eight.columns             { width: perc(380px, $max-width); }
     .nine.columns              { width: perc(430px, $max-width); }
     .ten.columns               { width: perc(480px, $max-width); }
     .eleven.columns            { width: perc(530px, $max-width); }
     .twelve.columns            { width: perc(580px, $max-width); }

Here are the mixins/functions that I used, not sure if that's important:

@function perc($width, $container-width) {
  @return percentage($width / $container-width);
}

@mixin container($width)  {
  position: relative; 
  width: $width; 
  margin: 0 auto; 
  padding: 0;
}

@mixin columns($max-width)  {
  float: left;
  display: inline;
  margin: 0 10px;
}

The code in the HTML file is just:

<% 6.times do %>
  <div class="two columns box"></div>
<% end %>

I figured if there was something wrong with the calculation of the percentages, all rows would mess up in one way or another. However, it's just the second one.. If anyone sees what's going on here, please enlighten me?

I put the processed CSS on pastebin: http://pastebin.com/bxq1a5Ge

Thanks in advance.

steveax
  • 17,527
  • 6
  • 44
  • 59
Joris Ooms
  • 11,880
  • 17
  • 67
  • 124

2 Answers2

2

I think you need to convert your margins into percentages as well. Everytime a div spans more than 1 column the gutter width of 20px is converted into a percentage as part of the block width. This will end up going wrong at some point.

Another option is that it is a rounding issue as the browser can't quite convert the percentage values into pixel values neatly.

I've set up a basic jsfiddle of the issue since jsfiddle supports SCSS. The example shows option 2 as a good candidate but I'd advise changing all widths to percentages.

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
  • I just tested this in Firefox and it looks okay there. It doesn't in Chrome. The JSFiddle you set up also looks bad in Chrome, like in my screenshot. Does this mean I should give up on the fluidness? A tad confused now :( – Joris Ooms Mar 04 '12 at 23:58
0

Apparently

perc(80px, 600px) gives 13.333%.

The issue got fixed when I used width: 13.3333333%.

Joris Ooms
  • 11,880
  • 17
  • 67
  • 124
  • Sass by default uses 3 decimal places. See [this Stack Overflow question](http://stackoverflow.com/questions/7672473/sass-and-rounding-down-numbers-can-this-be-configured) for instructions on how to override this setting. – steveax Mar 05 '12 at 01:54