I've built the following test case: http://www.sassmeister.com/gist/9127157
Problem is, as soon as the layout switches to three columns (starting at the bp 1075px) i have to switch the clearing for the classes .follow and .newsletter to none otherwise the flanking boxes .contact and .thanks get pushed. But now the .newsletter box is stacked above the .follow box.
Is there a way to solve that problem just with CSS (i've tried clearfix mixins but no luck) or is a wrapping div in the html markup necessary for the two classes .newsletter and .follow? I am out of ideas. :(
Thanks in advance Ralf
Unfortunately, the way that floats work, this is currently not possible with the HTML you have. Fortunately, the fix is fairly simple: a wrapping <div>
!
Check out the updated SassMeister gist for the full solution.
Basically, what you need to do to accomplish this is wrap .follow
and .newsletter
in a wrapping div that has no properties until your breakpoint where you need those two items stacked in the middle. Then, instead of using Singularity to position those items, they're simply 100% width, with .follow
floating either left
or right
, with .newsletter
clearing the direction that .follow
floated (or both)
. Finally, use Singularity to position the containing <div>
. This will stack them inside of that area and allow .contact
and .newsletter
to be positioned normally.