CSS Column Layout (Template) Tutorial

[ad_1]
In this CSS tutorial we learn how to create a simple two column layout by hand. Check out my 9 hour web design video course:

Link to Clearfix code:

Link to this demo’s HTML code:

Link to this demo’s CSS code:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Comments

36 responses to “CSS Column Layout (Template) Tutorial”

  1. Juan t Avatar

    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!!!

  2. Tom E Avatar

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

  3. Mad Goat Avatar

    .side {
    width: 300px;
    float: left;
    }

    why it floats to the right?

  4. Hracho Avagyan Avatar

    this is damn old. … too much things updated

  5. iloveyoutoiyeuban Avatar

    sorry, Why don't we just use {clear: left} for the element after "nav" ? Thanks

  6. Gasia Sarkis Avatar

    Hi when you use <meta http-equiv> what is that mean exactly ? what is meta's job in there ?

  7. Yasar Yousuf Avatar

    i dont understand the Clearfix part.can u help me ?

  8. Ashhad Sameer Avatar

    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

  9. Gyanender Sharma Avatar

    +LearnWebCode Why you put main and side in Class rather than in an ID? And is it necessary to use Classes in ID? Please explain

  10. TheRoxas13th Avatar

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

  11. Timothy Pulliam Avatar

    Where did you learn to code like that? It is beautiful. Fully annotated, everything is inside divs, well written. I am very new to HTML and CSS and I am looking for books on good practices. Any advice? (not codeacademy.com please.)

  12. noxin86 Avatar

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

  13. Hiaruga Avatar

    Great tutorial, thank you!

  14. Bobi Stoyanov Avatar

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

  15. That's Nonsense Avatar

    I don't know why but I had to add overflow:auto; in #container for the color to full cover the area. Without it, it was just covering only a portion.

  16. Tyler Dalbora Avatar

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

  17. toughquestionss Avatar

    nevermind, figured it out!! 🙂

  18. toughquestionss Avatar

    Love the tuts!! I think I am finally understanding the concept.. But how would I align the menu directly under the 'header' if it was an image? I noticed there are like two line of spaces on there.. I also wanted some text at the very very very top, but was not able to do it.. I know it's prob a simple thing, but can't figure it out.. I firgured out how to get the 'container' to be at the very very top though..

  19. 1995a1995z Avatar

    awesome man, keep it up

  20. boosuff Avatar

    Is the method in this video the method you use when building a website from scratch? Meaning, do you generally start with the HTML and content, then move on to the styling (CSS)? I'm just starting out and want to learn good, efficient work flow. What works best for you? Perhaps a video series that pulls all this know-how together, showing proper work flow by building a modern website from start to finish would really give perspective and "glue" all the concepts presented in other vids. TY!

  21. 1523dub Avatar

    Thanks for the video it helped me a lot, but I also would like to know how to make this website: 0:18.

  22. SteelersFans99 Avatar

    Thanks a lot!! I subscribed!

  23. The Lawrence Register Avatar

    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!!!

  24. Joanna Ma Avatar

    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?!

  25. LearnWebCode Avatar

    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!

  26. Connor Davis Avatar

    Awesome Video, really helped me, keep them up. I just had one problem, when I went to float the two paragraphs by each other, the background of the paragraph would be the same as the body background, as if the container element just vanished with it's white background. I partially fixed it by just making the container height:500px, but i want to use the auto feature. Any Help?

  27. Shazery Nasir Avatar

    i did learn something. thanks dude. subscribed 🙂

  28. banzie74 Avatar

    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.

  29. איציק מ Avatar

    Hey,
    First of all thank you for the excellent explanations.
    I browse with Google Chrome, and my operating system and Windows
    7
    I copied the code of clearfix
    I also tried with ie 8 and there it does not work Can you help with?
    Thanks

    Izik

  30. LearnWebCode Avatar

    @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.

  31. DuoEx Avatar

    The video is great, but I'm still confused when you clearfix the nav section. I tried it in 3 different browsers and it doesn't change to the way that you did it. Can you help me on this one?

  32. MrMacindude Avatar

    im not understanding this tutorial, sorry, just starts to quick in this one

  33. fatboy40ate Avatar

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

Leave a Reply

Your email address will not be published. Required fields are marked *