Creating a Two Column Fixed Width CSS Layout

Creating a CSS page layout not only keeps things nice and orderly, it also can save you a lot of work in the long-run. This video runs through the steps of making the HTML and CSS Stylesheets needed to design a two column, fixed width layout.

Incredibly in-depth and easy to understand, this lesson not only covers all the necessary information but it also provides plenty of insights and best practices for those of you who are still learning the ins and outs of CSS. It contains a lot of typing, which does not zoom in, so it is best to watch it in full screen mode in HD, if possible.

We kick things off with some basic HTML and then dive right into the CSS. First is setting up the parameters of the #container {} and #header {}. This gives us a quick chance to stop and see the progress so far. Very elementary compared to where we want to be in the end, but progress nonetheless. A good reason to check your progress along the way is so you catch small mistakes, like the need to adjust the top margin of the page to get rid of a small gap. You can do this by adding

body {
Margin: 0px;
}

Now the real work begins on the two column layout. Needless to say there is a lot of ground covered in the second half of this video where the columns are designed, and then fine-tuned. Rather than walk through it all step-by-step here, we will include the entire block of CSS below for you to compare to yours. Assuming, of course, that you are following along.

Some of the key best practice topics discussed in the video are industry standard positioning, using floats properly, keeping both your HTML and CSS in the same order, using the clear: property and attention to detail. It’s these moments that set the tutorials we feature on this site apart from the countless others out there. We hope they make a difference in how you learn and apply your new knowledge!

In the end you will have something that looks like the CSS code below if you followed along with the video!

body {
    margin: 0;
    background: #555;
}

#container {
    width: 960px;
    margin: 0 auto;
    border-right: 1px solid #4f4f4f;
    border-left: 1px solid #4f4f4f;
    background: #ccc;
}

header {
    width: 100%;
    height: 150px;
    background: #3b5998;
}

#left { /*720px*/
    width: 660px;
    padding: 30px;
    float: left;
    background: #fff;
}

#right { /*240px*/
    width: 195px;
    padding: 30px 15px 30px 30px;
    float: left;
    background: #ccc;
}

#footer {
    clear: both;
    width: 100%;
    height: 150px;
    background: #3b5998;
}

If you have enjoyed this helpful CSS tutorial video on creating a fixed two column layout, then you should also check out great lesson on how to make fixed headers with CSS. Don’t forget that if you have a request for a tutorial, or would like to share one of your tutorials with the CSSReset community, all you need to do is send us a message letting us know. Thanks for stopping by!