Overlapping Div despite with float

I am trying to do this.

with this sass.

#map {
    @include grid-span(8,1);
}

#form {
    @include grid-span(4,9);
}

#info {
    @include grid-span(8,1);
}

The problem is the #form and #map div are overlapping.

This is on 12 columns grid.

I know I need the clear and float. Tried many combinations. I've read the similar questions' link on floats and isolation. Still don't get it. Please enlighten.

What you're looking is for Clears, as you noted.

In Singularity for the float, isolation, and calc output styles, all items attached to the grid are floated left, unless the span ends on the last column in a row, in which case it is floated right. That means, given your example, #map and #info are floated left and #form is floated right.

Clears can seem tricky, but I find that just saying them aloud helps. clear: left or "Clear Left" is "Clear everything floated left". clear: right or "Clear right" is "Clear everything floated right". clear: both or "Clear Both" is "Clear everything floated both left and right". clear: none or "Clear None" is "Clear nothing, be it floated left or right". In this case, "everything" is "all sibling elements that come before me".

With this in mind, what you are looking to do is clear #map. #map is floated left, so you would add clear: left to your #info item. This will clear #map but won't add in the margin you're looking for. Fortunately, percentages, even when used for top/bottom, are still based on the browser's width, so if you want the same gutter between #info and #main that you have between both of them and #form, all you need to do is add margin-top: gutter-span(); to #info.

In the end, this is the code you'd wind up having:

#map {
  @include grid-span(8,1);
}

#form {
  @include grid-span(4,9);
}

#info {
  @include grid-span(8,1);
  clear: left;
  margin-top: gutter-span();
}

Here's a fork of your SassMesiter, showing it in action