Yo ninjas, in this CSS positioning tutorial, I’ll be showing you another example of where we can use floats in CSS to create a desired layout in the browser. In this example we’ll take a look at creating 2 columns of content that are both floated left. We’ll then clear the floats at the end.


========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. I don't understand why we need an :after{} after the main wrapper container. It has not been floated and all the other elements in it have been taken care of and had their floats cleared. If we clear the last element in the normal document flow (the two column element) this will provide a reference because its contained in the main wrapper div but it doesn't. The element above that is a block level element and doesn't need to be cleared. The element above that the sections has already been cleared. Why do we need an :after{} after the main wrapper container when its not been floated.

  2. Hi and thank you for these videos, very good, very, very good. I do have a question. The two columns are the height of the content and change according to the browser width – is there a way to keep them the exact same height no matter the browser width? I do know how to do it with flexbox so should I just go about it that way?

  3. how come that both of your columns are equal in height ? its just a coincidente or thats how it was supposed to do ?
    also nice videos , keep on going 😀


Please enter your comment!
Please enter your name here