Using singularity, I find some inconsistencies in floats with wide containers

Question

Im trying singularity for the first time, and I'm trying to recreate a grid I have. Simple one.

This is a simple structure, for the test:

<header>
    header
</header>

<main>
    main content
</main>

<aside>
    aside
</aside>

<footer>footer, nav, social icons etc</footer>

So in a 12 col grid, the header is full width, the main is 9 cols width, the aside is 3 cols width and the footer is full 12 cols.

Anyway, the inconsistency is this: the header, the aside, and the footer have float:right, but the main is float:left, so it gets out of the flow of the document.

This is the grid:

/* grid */
$grids: 3;
$grids: add-grid(5 at 500px);
$grids: add-grid(7 at 768px);
$grids: add-grid(12 at 1024px);
$gutters: 1/3;

This is the rest:

html, body {
margin: 0;
padding: 0;
height: 100%;
background: #e1e1e1;
color: #333;
}
.container {
min-height: 100%;
margin: 0 auto;
@include background-grid;   
}
/* main layout */
header {
@include grid-span(3, 1);
background: red;
@include breakpoint(1024px) {
    @include grid-span(12, 1);  
}
}
main {
@include grid-span(3, 1);
background: green;
@include breakpoint(1024px) {
    @include grid-span(7, 2);   
}
}

So the issue is that, it does not respect the flow and it overlaps with the header, like this http://imageupload.maxmendez.net/images/incon.png. The green main, should be below the header.

In order to fix that, I had to do this:

main {
@include grid-span(3, 1);
background: green;
@include breakpoint(1024px) {
    @include grid-span(7, 2, $options: 'right');    
}
}

Adding options right, seems to clear to the right and fix my issue. Is there a reason that im overlooking as to why the mai is floating left?

Still havent tested in IE, but im worried about compatibility.

Answer 1

It seems as if you are unfamiliar with what the clear property does or how it works. When using the Isolation output method, you need to clear your own floats, something you may not have been exposed to with more traditional Float output method based grid systems/frameworks. A good place to read up on them is MDN's Clear section.

In the example you've provided, header spans the whole grid width. Because the last item in a grid is floated right, the header is likewise floated right. This is to hide any percentage rounding issues with the last item in a row and have them all line up to the right edge. Otherwise, all grid items are floated to the left. Because this item is floated right, in order to clear it's border edge (not have it overlap), we need to tell the next item in the DOM (your main element) to clear items floated right. This will push it below header, creating a new row. Because footer is full width and is therefore floated right, and your aside is also floated right, there is only enough room on the main/aside row for an item of width 100%-width(aside). Because footer is too wide for that remaining area, it drops to the next row without needing to clear its float. That being said, this will only not overlap with main because main and aside are the same height; if main becomes taller than aside, footer will overlap it. To prevent this, you should tell footer to clear things floated to the left, which main is.

While this all sounds fairly complicated, don't be worried about cross-browser compatibility. We have tested Singularity extensively across all browsers, including IE, and it works fine.

If after all of this you are still uncomfortable with the Isolation output method, you can switch to the Float output method. The two have very different mental models; Isolation is about discretely positioning elements in relation to each other whereas Float is more akin to walking across a row on your grid. Keep in mind that if you switch to Float you will then need to use the push and pull mixins to nudge things around the grid.

Hope this helps!