Menu icon Foundation
Collapse empty column

So I've been tasked with creating a column on the right that will contain an ad. Ads won't always be served, however, and it is supposed to collapse if it's empty, allowing the left column to take the full width. Also, if there is an ad, if should reflow to below the content in medium and small sizes (which means that putting it before the other column and just floating it to the right won't work).

Ideally there would be some way of setting the left column to large-12 if there wasn't any content in the right column... looking for any ideas. Thanks!

columnscollapseempty

So I've been tasked with creating a column on the right that will contain an ad. Ads won't always be served, however, and it is supposed to collapse if it's empty, allowing the left column to take the full width. Also, if there is an ad, if should reflow to below the content in medium and small sizes (which means that putting it before the other column and just floating it to the right won't work).

Ideally there would be some way of setting the left column to large-12 if there wasn't any content in the right column... looking for any ideas. Thanks!

Tasha Jaeger about 4 years ago

Correct me if I'm wrong, but I was only able to get this example to work if the empty div was on the left - and unfortunately I need it on the right.

Rafi Benkual about 4 years ago

You can do this with some CSS - Luckily I answered this just the other day.

http://codepen.io/rafibomb/pen/Kpxbra?editors=110

You can use the :empty pseudo selector NOTE: there cannot be any whitespace in the empty element fo this to work.