DIV not clearing using Susy Framework with @omega

Question

I am trying to float 2 divs to the right using the Susy Compass framework and having a clearing issue:

<div class="div-1">
  <h2>DIV 1</h2>
</div><!--end div-1-->

<div class="div-2">
  <h2>DIV2</h2>
</div><!--end div-2-->

<div class="div-3">
  <h2>DIV 3</h2>
</div><!--end div-3-->

<div class="div-4">
  <h2>DIV 4</h2>
</div><!--end div-4-->

<div class="div-5">
  <h2>DIV 5</div>
</div><!--end div-5-->

And here is my Susy layout code:

#detail{

    .div-1{
        @include breakpoint($breakpoint-md){
            @include span-columns(7, 12);
            @include pre(1);
            background-color:pink;
        }
    }

    .div-2{
        @include breakpoint($breakpoint-md){
            @include span-columns(7,12);
            @include pre(1);
        }
    }

    .div-3{
        @include breakpoint($breakpoint-md){
            @include span-columns(7,12);
            @include pre(1);
        }
    }

    .div-4{
        @include breakpoint($breakpoint-md){
            @include span-columns(3,12);
            @include suffix(1);
            //@include omega;
            background-color:blue;
        }
    }

    .div-5{
        @include breakpoint($breakpoint-md){
            @include span-columns(3,12);
            @include post(1);
            //@include omega;
            background-color:orange;
        }
    }
}

To give an example of how this is rendering, below is a screenshot:

As you can see, div-3 and div-5 are not clearing to the top, to align with div-1.

I thought perhaps I could use the @alpha mixin, but it is deprecated in Susy 1.0 (which I am using). I have also tried using @omega on div-3 and div-5 with no change.

Answer 1

That's how CSS floats work. A float will never align any higher than the previous element (div2). There is nothing Susy can do about that.

You will have to make adjustments to you markup in order for this layout to work - either switching the order of divs, or adding a wrapper around divs 1 & 2 (which is what I would recommend to preserve source order).

Or, if you want to get tricky, you could handle divs 3 & 5 without floating them. Something like this (ignoring breakpoints for simplicity):

.div3, .div5 {
  @include pre(8);
  @include suffix(1);
}

That should push them to the right, while ignoring the floated divs 1, 2, and 4.