CODEWITHSUNDEEP
csssasssusy-compass
Alan
Alan

Reputation: 180

SUSY how to keep rows separate

If with a SUSY grid I want

[column1 of copy] [column2 of copy]
[column3 of copy now on a new row] [column4 of copy]

...that is I want a new row for my column3 and column4 text regardless of how tall columns are, is there a pure SUSY way of achieving this?

I am finding that if the content of column2 is tall (a lot of text) then column3 'pops up' to sit directly under column1, so I assume a clear is not being applied—I am using the omega directive for the last item in each row and was naively assuming this was a magic bullet that also ensured row clearing.

I am solving this for now with

<div class="clearfix"></div>

between each row but I wonder if I am not understanding part of SUSY and perhaps I can achieve this with pure SUSY statements?

Upvotes: 2

Views: 1202

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

You don't need any extra markup, or help from Susy, there's a super-simple css way to handle this. That's exactly what the clear property is for. All you need is this:

.column-three { clear: both; }

You can clear left, right, or both to drop an item below floats on either or both sides. Susy doesn't have any feature for it because I can't find any way to make it simpler or more meaningful than it already is.

Upvotes: 1

Related Questions