Clearing floating elements inside a container

Mar 12, 2015 | Blog

the demo

With CSS, floats have always been a bit tricky. When it comes to clearing them, you can find your layout a big mess when changing things around. Often times, you want a container that will always clear a float at the bottom on the container. I've heard using overflow: auto as a fix for this sort of problem. As this works, it's not the best idea since it can present some future problems and if you want the overflow to be something else it simply breaks. An effective method I've found is by using a pseudo element as a clear after the content. The markup:

    Welcome to awesome
    Let me tell you.

    Side menu

 Clear the float before this content.

Some CSS:

.two-cell {
  > * {
    width: 50%;

  > *:nth-child(1) {
    float: left;

  > *:nth-child(2) {
    float: right;

  &:after {
    content: "";
    display: block;
    clear: both;

Why this is a good option

You'll notice that if you rid the :after element, the footer now floats off the right, which is clearly wrong. This works well since wherever you use this container, you don't have to worry about extra steps to ensure content to follow displays properly.

Recent Articles

Introducing Relatable

Keeping things organized within a Shopify store can be hard, so we built Relatable to help with that.

Why we use Cloud66 to launch Ruby on Rails apps

We use Cloud66 for deploy Ruby on Rails apps, and we love it.

5 Common Pitfalls when Developing a Shopify Theme

Learn some tips on developing Shopify themes and some pitfalls to avoid. Build Shopify themes that perform and are easy to update and edit.

How to create a Shopify email link from your theme navigation

Add an email link to your Shopify website from within your theme using your current link list in navigation.

How to flag Shopify products as "new" by date

Here's a quick way to mark a product as being new by the date it was added to your Shopify store.