CSS Column Layout (Template) Tutorial

In this CSS tutorial we learn how to create a simple two column layout by hand.

Link to Clearfix code:

Link to this demo's HTML code:

Link to this demo's CSS code:

Follow LearnWebCode on Twitter for resources and updates:

[mjmartin]

I've watched a LOT of videos about CSS and yours is by far the clearest and easiest to understand, no long boring introductions! I am so happy I found you, I plan on watching every video you have made on learning css! Thank You So Much!!!

[LearnWebCode]

Connor, great question. You need to "clear" the floats of your two paragraphs. You can either add an empty element (such as a div) below the P's in the markup and style them with "clear: both;" or you can use a "clearfix" solution on the container / parent element. I have a video on "Clearing Floats" which should help. Thanks!

[LearnWebCode]

@RobinLilfelt Thank you! It's great to know that someone saw this and enjoyed it :) Also, thanks for the compliment; this was just sort of an experiment to see if I could create decent tutorials. I will definitely try to make more after reading your comment!

[oleifyj]

dang. Why is this not so damn popular? but thanks! your tutorial helped me a lot.

[tybird]

your tutorials are some of the best work I've seen! you are a very good teacher.

[fatboyate]

great info More on easy Css. there are some of us there that are dumbfounded by it all. Keep up the good work.

[juantoledo]

for the #nav li, how do you feel about using display: inline-block; as oppose to float-left?
update : sorry didn't realize this video was over 7 years old!!!

[jotatical]

You're simply awesome. Brad, your videos helped me a lot, and your voice is cool. >w>

Also, your video was 9 minutes 59 seconds, PERFECT TIMING OMFG HOW GOOD ARE YOU?!

[tome]

That was a very helpful tutorial at a good pace. Thank you for your effort.

[RobinLilfelt]

I just love your videos! How can you remember what all the code does? Like margin, padding, and so on. How? ;)

I hope you will keep up making tutorials, because you are really really good at it!!

Sincerely,
Robin Lilfelt

[BobiStoyanov]

10x again bro really nice and useful + short in time !

[noxin]

I couldn't get the second column in why is it not separating?? and moving to the side

[guylemay]

Nice & simple ...just the way I like it!

[aimerclaireambagan]

Thanks! It's a great help! it's simply awesome!

[inthetube]

Really like your videos, but just have one question. Why having the width in px instead of %? doesnt that make problems when using a phone to watch?

[gnomefan]

i did learn something. thanks dude. subscribed :)

[ashhadsameer]

Thanx for this tutorial it was really very helpful in learning the principles of Web layout for beginners.however moving the navbar to the left corner using #nav{ margin 0; padding 0;} didn't work I had to pt #nav ul{margin 0;padding 0} all the others were perfect thanx

[TheRoxasth]

This video need more view. This video help me a lot!! 

[banzie]

Great tutorial, and great series, and might've been aptly called "for dummies" :-). Would be great if you could annotate the video to explain things like "float". I am wondering what does "float mean", at 2:50 for instance.

[LearnWebCode]

@DuoEx - Are you adding a class of "clearfix" to the UL element, and also including the clearfix CSS code provided in the video's description?

That should do the trick in virtually every web browser. If it still isn't working maybe you can upload your code somewhere and I can take a look.