Unable to clear two stacked Singularity isolation-span boxes otherwise the flanking boxes get moved

Question

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

Answer 1

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.