Don't span the container.
The problem you experience happens because Singularity columns are float
ed, and floated elements are taken out of the flow. This means that the container does not "know" about your columns any more, so it behaves like an empty element.
There's a property called clear
that positions an element below any nearby floated element. If you create an extra element inside the container after all your columns, the clear: both;
rule applied to it will push it below the floated columns, effectively stretching the container as high as columns are:
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
<div class=clear></div>
</div>
.clear { clear: both; }
But don't add an extra element, that's not semantic. Instead, use the :after
pseudo element that appears at the end of an element's contents. Using :after
is just like creating a blank element at the end of element's contents.
.about {
&:after {
content: ''; // This is required for the pseudo-element to exist
display: block; // Default display is inline, have to change that for `clear` to work.
clear: both; // Yay, magic!
}
}
This technique is called "clearfix".
This can be done even simpler with the multi-purpose Toolkit extension from Team Sass, the authors of Singularity:
@import 'toolkit';
.about { @extend %toolkit-micro; }
The %toolkit-micro
extendable has some additional rules that makes the clearfix trick work in older browsers. There's also the %clearfix-legacy
extendable that works even in ancient browsers.