May 29, 2012

Two Column CSS Layout Template

One of the best ways to learn XHTML & CSS is to simply jump into a fully functional layout and dissect the code. It can be much more rewarding to edit and understand a complex layout than to learn from the ground up. So to go along with my introductory lessons, I have created a Two Column CSS Layout Template:

When you look at the source code you will find comments along the way that explain what certain elements are used for. The CSS file is also broken up into logical sections.

You are free to use/alter this template for commercial, personal, or educational purposes. However, please do not upload the original .zip file on another website.

If you come across anything in the template that doesn’t make sense please leave a comment; perhaps others are having the same problem and we can learn together through this post.

I am also taking requests for additional templates you would like to see offered.

If you would rather learn from a single, unified video course instead of individual one-off tutorials check out my updated 8 hour video course and learn pro-level HTML, CSS, and responsive design.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

10 thoughts on “Two Column CSS Layout Template

  1. I have a question. In the css you use

    .clear {
    clear: both;
    }

    This I understand, it is used to clear the floats.

    But what does the next one do:

    .clearfix:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    Could someone explain that?

    Cheers.

  2. Hi Bill – that is a great question!

    As you mentioned, the “.clear” class is used to clear floated items which come earlier in the markup.

    The “.clearfix” class can be applied to parent elements which contain floated children. For example, if we had an UL element with several floated LI children – we could apply “.clearfix” to the UL and the floats would then be cleared.

    The other alternative is to float the UL in the same direction that it’s children LI’s are floated – but then this causes you to also have to use “.clear” on an element underneath the UL in the markup.

    It’s really a matter of preference πŸ™‚

  3. Thanks Brad for the quick response.

    So in essence it does the same, but with the clearfix-method you have to write less code, or rather, apply the class less times in the html to achieve the same.

  4. No problem, Bill.

    The biggest reason I prefer the clearfix-method (and rarely ever write any code that uses the manual “clear:both” method) is for the sake of having chunks of code be self-containing. When you rely on elements below in the markup to handle the clearing of other floats things can become tricky when you start moving chunks of content around from page-to-page, or re-ordering content.

    I prefer to keep chunks of content modular / self-containing for the sake of portability, so I prefer the clearfix method and erring on the side of perhaps having an extra container element in the markup that otherwise wouldn’t be necessary.

  5. I really enjoyed watching your tutorial videos, I just want to ask if you could also have PHP tutorial πŸ™‚

    Thanks for sharing your knowledge.

    1. Hi Elizondo,

      Thanks, I’m glad you found the tutorials useful! In the future I hope to put out a few extremely basic PHP tutorials, as well as a full step-by-step guide on creating WordPress themes. PHP isn’t my specialty so I can’t teach full featured development, but I can pass along the basics to help get you started.

      Thanks!
      Brad

  6. Added two classes to your css file for the 2 col layout. I wanted to center a paragraph so added class. p.centered {text-align: center;}

    Also, added a class for using bold. span.b {font-weight: bold;}

    I use spans for underline, bold, italics, fonts or strikethrus.
    Your web page design is great for the little code required.

  7. Hi Ronald,

    Your “p.centered” class is a great idea! However, for bold and italics you can simply wrap the text inside the “strong” and “em” tags respectively.

  8. Would like to say a big thank you for your great tutorials(n easy to follow), i’v been playing around with html+css and bits of the others for a few years, but iv a brain like a sive and i keep forgetting my css, wish i didn’t but hey thats life, your tutorial was great for me , thanks again

  9. this tutorials are great!! thanks so much!!! keep up the good work, i have bookmarked several pages on your website πŸ™‚

Leave a Reply to Bill Cancel reply

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