Use the links below to share Two Column CSS Layout: The Absolute Basics on your favorite social networks.
Back to the Article >>
Two Column CSS Layout: The Absolute Basics
January 9th, 2008 in Design Tips & Tutorials
by: Matthew Griffin
This tutorial is for the designer who wants to get acquainted with the basics of CSS layout. There are a lot of articles floating around with advanced CSS tips and tricks but there seems to be a gaping hole where the basic tutorials should be. An article like this would have been tremendously helpful to me when I first started into CSS layouts. If you're about to to take the plunge I'm sure this will be helpful for you.
I'm writing this tutorial with the assumption that you know basic HTML. If you don't know what <body> means, you need to get a good book on HTML before this will be any help to you. I am also assuming that you know how to create a .css file and link it to a web page. If you think you're ready, let's get started.
The <div> Tag: Basic Building Block of the CSS Layout
Whether or not you've messed with CSS layouts, you've probably seen the <div> tag. The <div> tag is a generic tag whose primary use is to DIVide blocks of content. In most popular HTML editors a set of <div> tags is created automatically when you select a block of text and change it's alignment. The resulting code would probably look something like this:
Here is my block of text
</div>
With a little help from CSS, the <div> tag can do more than just change the font and alignment of text. In fact, the <div> is the basic building block of the CSS layout. In a CSS layout, the <div> tag is a lot like the table cell used to be. But the <div> tag is more flexible and semantically appropriate for dividing content. The table cell should only be used to contain tabular data. In this tutorial, we'll use <div> tags to create a box or container around content and then we can use CSS to position the box, make the box wider or skinnier, taller or shorter, have a border, have a background, and a lot more. Here is some HTML and corresponding CSS to create a block of content that is 300 pixels wide, 200 pixels tall with a 1 pixel wide black border around it and 10 pixels of padding.
Here is my block of text
</div>
<!-- Here's the CSS code -->
div.my_cool_box{
padding: 10px;
width: 300px;
height: 200px;
border: 1px solid gray;
}
The CSS determines how the box will look and, as you will see next, where it will appear on the screen. You will notice already, there is a clear separation of style information from content information. This is a very important concept to grasp if you are going to build websites correctly. Separating style from content will make your websites download faster, index more effectively on search engines, easier to redesign, and more accessible. Check out this article for more information on building a semantically correct content layer: Intro to Web Design: Building a Content Layer with HTML.
The Float Attribute: Tell Your Content What Side it Should Be On
With the code above all you can do is create a bunch of boxes that iterate down the page. But most website have multiple columns to display content. That's where float comes in. Float tells a <div> box to appear to the right or left of the content around it. For example, in order to create two boxes that appear side by side like columns, we would do something like this:
Here is the left box
</div>
<div class="my_right_box">
Here is the right box
</div>
<!-- Here's the CSS code -->
div.my_left_box{
float: left;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
div.my_right_box{
float: right;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
This code will produce two 300 pixel wide columns—one appearing in the upper left-hand corner of the screen and one appearing on the far right. Now we're getting somewhere.
Reining Your Layout in with a Wrapper
Okay, the next step is to rein the layout in—give it some boundaries. The example above will give you two columns appearing further and further apart depending on how wide the viewer's screen is. But we want our columns to appear right next to each other no matter how wide the screen is. To do this, we need to wrap our other two boxes with another <div> tag like this:
<div class="my_left_box">
Here is the left box
</div>
<div class="my_right_box">
Here is the right box
</div>
</div>
<!-- Here's the CSS code -->
div.my_wrapper{
width: 630px;
}
div.my_left_box{
float: left;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
div.my_right_box{
float: right;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
The <div> tag in the class "my_wrapper" puts a box or container around our original content boxes and makes sure that they don't wander to the edge of the screen. The example above will produce the same two boxes but this time they will be right next to each other because the wrapper <div> keeps the right box from floating any further than 600 pixels. Usually you will put some kind of wrapper <div> around all the HTML inside your <body> tag.
PITFALL: Always make sure to specify the width of the columns inside your wrapper. If you use Firefox, the layout will look fine but IE will place your columns on top of each other.
Don't Forget to Clear
Some of the most frustrating moments I had when I was learning CSS layouts revolved around the "clear" attribute. Clear makes your content stop wrapping around <div>s that are floating to the right or to the left. For example, if you have a two column layout and below the two columns is a footer that spans the length of both columns, you don't want that footer content to wrap around what is above it. In order to make sure it doesn't, you will have to specify that the footer <div> clears both columns and starts fresh. The code below will produce the same two columns we had before and a footer box below them.
<div class="my_left_box">
Here is the left box
</div>
<div class="my_right_box">
Here is the right box
</div>
<div class="my_footer">
Here is the footer
</div>
</div>
<!-- Here's the CSS code -->
div.my_wrapper{
width: 630px;
}
div.my_left_box{
float: left;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
div.my_right_box{
float: right;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
div.my_footer{
clear:both;
padding: 10px;
width: 610px;
border: 1px solid gray;
}
Building a Header and Dealing with Overflow
By now the system should be starting to make sense but we need to take a moment to tackle an important issue and a potential pitfall. When you place images inside <div> boxes, and you need the box to be a specific height, always remember to set the overflow of the <div> to hidden. For example, when your are building the header for your design, you might have a logo that is 100 pixels high and you want to make sure the <div> box is exactly 100 pixels high as well. You will set the height of the box to 100px and then specify "overflow: hidden". This fixes a very annoying little bug in IE that will cause some unwanted padding to appear at the bottom of your <div>s. Now, let's add our header. The header HTML will go inside the wrapper just above "my_left_box" and will look like this:
Here is the Header
</div>
and the CSS for the header will look like this:
padding: 10px;
width: 610px;
height: 100px;
overflow: hidden;
border: 1px solid gray;
}
Simple Horizontal Navigation with <li>
We're almost finished. The last important piece of the CSS layout is the <li> tag. The <li> tag can be used to build a list of items either horizontally or vertically. In this case, we are more interested in the horizontal list. Using the <li> tag and a little CSS we are going to build a horizontal nav bar at the top of our layout. Here is the final example in all it's glory:
<div class="my_header">
Here is the Header
<ul>
<li class="my_nav_link">Contact Us</li>
<li class="my_nav_link">About Us</li>
<li class="my_nav_link">Home</li>
</ul>
</div>
<div class="my_left_box">
Here is the left box
</div>
<div class="my_right_box">
Here is the right box
</div>
<div class="my_footer">
Here is the footer
</div>
</div>
<!-- Here's the CSS code -->
div.my_wrapper{
width: 630px;
}
div.my_header{
padding: 10px;
width: 610px;
height: 100px;
overflow: hidden;
border: 1px solid gray;
}
li.my_nav_link{
text-align: right;
float: right;
list-style: none;
padding-left: 15px;
}
div.my_left_box{
float: left;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
div.my_right_box{
float: right;
padding: 10px;
width: 290px;
border: 1px solid gray;
}
div.my_footer{
clear:both;
padding: 10px;
width: 610px;
border: 1px solid gray;
}
This final example will produce a layout with a header, two columns, a footer, and a horizontal nav bar. The final addition we made to the code—the <li> tag trick—can be helpful in a lot of situations. Just remember to set "clear: both" on any <div> tag appearing after one of these <li>s. The "overflow: hidden" pitfall can also apply to <li>s so watch out for that.
Another solution to this problem is to set the "position" attribute of the nav <ul> tag to absolute and then specify a "top" and "left" attribute to position the nav bar exactly where you want it on the grid. If you use this method, though, make sure to set the "position" attribute of the containing tag (in this case it's the <div> in the "my_wrapper" class) to "relative". If you don't, the absolute positioning of the nav bar will be relative to the upper-left corner of the screen rather than the upper-left corner of your design. This is especially important if you are coding a layout that is center-aligned.
You should know enough to be dangerous now. Next comes the tinkering and the hair pulling. Check out these articles if you want to go a little deeper.
Pushing the Limits (Part 1): The Perfectly Semantic Three-Column CSS Layout
Pushing the Limits (Part 2): A Simple Four-Column CSS Layout with a Little Divitis
Pushing the Limits (Part 3): Building a Semantic Four-Column CSS Layout
Indestructible Website: How to Build an EM Based Layout that Won't Break
UPDATED 11/5/2009
- 53 Comments
- 114875 Views