0

I have a CSS grid created with Susy, with two asides and a content section, like this:

|1| |2| |content|
        |content|
        |content|

The source order is content-1-2, but the above is easy enough using push() and pull().

On a narrower screen, I want the asides to be above each other, like this:

|1| |content|
|2| |content|
    |content|

I am able to pull them into the same column, but they will simply overlap. How can I make this work?

2

1 Answer 1

2

I wouldn't use push/pull to achieve your basic arrangement. Instead, simply set your content as "omega" and it will float right, leaving space for asides 1 and 2 to stack or float next to each other automatically. Whenever you can, keeping objects in the natural "flow" is a really good idea, and in this case it solves your problem. :)

2
  • You're right, that makes total sense. I didn't fully understand the usefulness of 'omega' in situations like this. Thanks! Jan 2, 2013 at 23:37
  • 1
    You can achieve similar re-arrangements simply by floating some things right and others left. That's really what you are doing here with omega, it just takes care of the final gutter problem at the same time. Jan 3, 2013 at 4:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.