Singularity.gs div background not showing

Question

I am building a website using singularity.gs which I am fairly new to. I am having trouble giving a div a background-color, this is my html structure:

http://oi44.tinypic.com/205xt1i.jpg , the "green" part is my about div.

<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&eacute</h1>
        <p>...</p>
    </div>
</div>

To achieve this affect is had to set a height for the div:

@include breakpoint(70em) { 
 .about {
   height: 340px; //This property will set the height of the div
 }

.about .photo {
   padding: 1em;
   @include grid-span(2, 4);
 }

.about .text {
   padding-top: 7em;
   padding-left: 1em;
   display: inline;
   @include grid-span(4, 6);
}}

If I remove the "height:340px" no background will be drawn:

http://oi39.tinypic.com/2s16ezl.jpg (only my thin borderline)

Is there a way to let the div wrap its height around its content (.photo,.text)?

Note: if i remove @include grid-span for .photo and .text the background shows but I do not want to lose the singularity functionality

Thanks in advance!

Answer 1

Don't span the container.

The problem you experience happens because Singularity columns are floated, 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&eacute</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.