Layout using Singularity

I've been trying to create a couple of typical layout examples using Singularity, and I have a question about grid-span and floats.

I've created a sample scss stylesheet and html layout. Here's the complete example on Sassmeister.

http://sassmeister.com/gist/a7ca98b7520b12bd6241

My question is whether the containing content div <div id="content"> is necessary? I'm having to use it with a clearfix mixin in order to 'pull' the div down and keep the footer below the content section and aside.

Is there another way to achieve this layout with Singularity, without having to use the surrounding clearfix div? Is there an option for grid-span in the main section that will either not use a float, or self clear this section?

To understand your problem you have to learn how floats and clearing work.

0.

When you float an element, it is removed from the flow. It's vertical height does not count when calculating the height of the container.

1.

The intended usage of floats is to add images to a long sheet of text. The text would wrap around the floated image and increase its overall height and stretching the container vertically, just like an object submerged into water increases the height of water surface.

Before:

After:

2.

If the floated image is located very close to the bottom of the text, it will pop it's bottom out of the bottom of the container, just like an iceberg exposing it's top from the water.

3.

Now imagine that your text is comprised of paragraphs and each paragraph starts with a title. When there's an image floated at the bottom of a paragraph, the image would stretch into the next paragraph, pushing the next paragraph's title aside.

4.

If you don't want that to happen, you apply clearing to paragraph titles:

h2 { clear: both; }

This basically tells the titles: don't let floated images push you aside, let them push you down instead.

5.

But web pages have become more than formatted text, and HTML/CSS didn't provide any means of formatting layouts. So we started using floats for layouts. It's ugly, it's like using wallpaper to sew your clothes, but we have no better option (until Flexbox becomes a thing, and it seems to already).

What happens when you float all content in a container? There will be no flow left, no text to stretch the container vertically, and it's height will be zero (plus border and padding):

6.

You already know that in order to make containers regain their height (wrap around the floated content) we have to apply a clearfix to the container. But what a clearfix actually is?

When you apply a clearfix to a container, you use :after in CSS to create an additional element within the container, after all it's content. Then you apply clearing to the little mother fcuker:

.container:after {
  content: '';
  display: block;
  clear: both;
}

7.

Now back to your question! What's the alternative of using the clearfix?

You've probably have guessed already.

If you've got got content below the floated element, simply apply clear: both to the next element below the floated one! Just like we did in #4 for paragraph titles.

In your case: