0

I have a three divs layout and want to place them in one line:

Main | Aside | Box

main {@include span (8 of 17);
aside {@include span (4 at 9 of 17);
.box {@include span (2 at 13 of 17) @include pull(2);

I dont get the .box to leave space between itself and aside. With the code above the .box will be placed over main. Without the

@include pull(2)

it will be placed direct right. Any suggestions?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
seb4222
  • 5
  • 4
  • I tested also different float-right on the .box- div. Also push(2). – seb4222 Sep 10 '15 at 11:48
  • Either I don't understand the problem, or I can't reproduce it. Here's a working [demo on SassMeister](http://sassmeister.com/gist/c7c14a3ae4ef22d892a6). I'm not sure why you need to push or pull the last one. Notice also that the `at x` syntax only works for `isolation` output, which pulls elements from the flow, and positions them off the left edge. I don't recommend it except in very specific cases. In your case, that bit isn't doing anything. – Miriam Suzanne Sep 11 '15 at 07:06
  • @EricMSuzanne thanks for your time. Your demo is quite good. But not what i want. I want the Box div on position 15,16,17 and 2 "empty" cols between box and aside. – seb4222 Sep 22 '15 at 22:49

1 Answers1

1

The pull mixin adds negative left margins to an element, pulling it to the left. The push mixin adds positive left margins, pushing it right. But in this case, you can just float the element right, which is what happens when you add the last keyword. What you want to do is span the last 3 columns out of 17, so in this case, you can just write that:

.box { @include span(last 3 of 17); }

see http://sassmeister.com/gist/c7c14a3ae4ef22d892a6

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43