The CSS way to create column layouts
- Two column layout left aligned
- Two column layout centre aligned
- How to achieve the "two equalising columns" layout
Many people still use tables to hold their page content but with web standards becoming ever popular, this isn't how things should be done anymore. The table tag is now only reserved for housing data. Think of a table as containing anything that has lots of columns and rows (and isn't in a form), and could potentially be imported into a spreadsheet or database. A mouthful I know, but it'll come in handy! So without tables how do we layout our content then?
Enter the <div> tag
If used correctly the <div> tag can save you a lot of hassle. Compared to coding tables, the <div> tag is more lightweight and versatile. Instead of dealing with colspan and rowspan and tds and trs, we now have just one tag <div>. Not only that: it can be manipulated many ways with CSS, as you are about to see, to produce a variety of different layouts.
Two column layout left aligned
Here I will show you how to float two columns next to each other. For a two column equalising layout (i.e., a layout whose columns are all as tall as the highest column), see below.
CSS
#parentContainer {
background-color:#CCCCCC;
}
/* The header */
#header {
height:80px;
background-color:#0066CC;
width:555px;
margin-bottom:4px;
}
/* The inner-container */
#innerContainer {
width:555px;
height:100%;
overflow:auto;
background-color:#CCCCCC;
}
/* Column one */
#col1 {
width:150px;
height:40px;
overflow:auto;
margin:0 5px 0 0;
float:left;
background-color:#0066CC;
}
/* Column two */
#col2 {
width:400px;
height:40px;
overflow:auto;
float:left;
background-color:#0066CC;
}
/* The footer */
#footer {
height:20px;
background-color:#0066CC;
width:555px;
margin-top:4px;
}
HTML
<div id="parentContainer">
<div id="header"></div>
<div id="innerContainer">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
</div>
We are creating two columns to be floated side by side and placing them in an #innerContainer to separate them from the #header and #footer. The whole layout is then placed in a #parentContainer. The parent doesn't have a specific width, as it doesn't need one, but the inner-container does. The inner-container has a width which takes into consideration the widths of our two columns (150px + 400px) and also any margins or padding or borders applied to the inside elements. Well, we haven't used any padding or borders, but we have used a right margin. So the final sum of the inner-container's width is 150px + 400px + 5px = 555px.
Result
As you can see, our two columns are nested side by side.
Two column layout centre aligned
To centre align two columns we must apply margin:0 auto to the container which holds them, #innerContainer. This will create equal margins on both sides, thus centering #innerContainer within #parentContainer. As long as the width of the inner-container matches the width of its inside elements, it will be centre aligned. If any discrepancies occur you will experience unseen results, such as your right column dropping down, as the width of #innerContainer isn't sufficient enough to contain the two, or your content not being completely centre-aligned, because the width of #innerContainer is too great.
CSS
#parentContainer {
background-color:#CCCCCC;
}
/* The header */
#header {
height:80px;
background-color:#0066CC;
width:555px;
margin:0 auto;
margin-bottom:4px;
}
/* The inner-container */
#innerContainer {
width:555px;
height:100%;
margin:0 auto;
overflow:auto;
background-color:#CCCCCC;
}
/* Column one */
#col1 {
width:150px;
height:40px;
overflow:auto;
margin:0 5px 0 0;
float:left;
background-color:#0066CC;
}
/* Column two */
#col2 {
width:400px;
height:40px;
overflow:auto;
float:left;
background-color:#0066CC;
}
/* The footer */
#footer {
height:20px;
background-color:#0066CC;
width:555px;
margin:0 auto;
margin-top:4px;
}
HTML
<div id="parentContainer">
<div id="header"></div>
<div id="innerContainer">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
</div>
Result
Our content is now centre aligned on screen.
How to achieve the "two equalising columns" layout
Ever wanted to have your columns all the same height, without using definite measurements? So, let me get this straight...it is possible to have my short navigation panel stretch to be the same height as my incredibly long main content...I hear you cry? Yes it is. (sounds like an insurance advert, doesn't it?). Well here's how you do it.
CSS 3...er, not quite
CSS three has a whole stack of properties which really help when creating equalising columns, as well as general multi-column layouts. Unfortunately CSS3 is not widely supported so we have to look elsewhere.
The background image technique
This is the most common technique for creating equalising columns and involves a little image trickery! It works by applying a repeating background image to our container, to create the illusion that the short column is as long as the image, when, in fact, it isn't. If you're not with me, here's an example.
Say I have a two-column website, navigation on the left and main content on the right. My navigation is mostly shorter than my main content (though not always) but I would like both columns to be the same height. To get round this I would apply a background image with the same width as the navigation (150px) to the container which holds both columns and position it behind the navigation, then set it to repeat-y, so it repeats vertically.
This is what our layout looks like to start with, without the background image applied to the navigation. As you can see, the navigation is shorter:
I have added a pink background to the navigation, so you can see how high it really is.
Here is the final product. The image applied to #innerContainer makes it look as if the navigation stretches to fit the container.
CSS
#parentContainer {
background-color:#CCCCCC;
}
/* The header */
#header {
height:80px;
background-color:#0066CC;
width:555px;
margin-bottom:4px;
}
/* The inner-container */
#innerContainer {
width:555px;
height:100%;
overflow:auto;
background:url(substitute with your image) repeat-y;
}
/* The navigation */
#nav {
margin:0;
padding:0;
list-style-type:none;
width:150px;
height:100%;
overflow:auto;
margin:0 5px 0 0;
float:left;
}
/* The navigation elements */
#nav li {
background-color:#666666;
color:#ffffff;
margin-bottom:6px;
padding:3px;
}
/* Column two */
#col2 {
width:400px;
min-height:400px;
overflow:auto;
float:left;
background-color:#0066CC;
}
/* The footer */
#footer {
height:20px;
background-color:#0066CC;
width:555px;
margin-top:4px;
}
HTML
<div id="parentContainer">
<div id="header"></div>
<div id="innerContainer">
<ul id="nav">
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
</ul>
<div id="col2"></div>
</div>
<div id="footer"></div>
</div>
You might still be wondering what happens if the navigation is longer than the main content. The way to get round this is to give the main content a min-height that won't be below the height of the navigation. In the example above, I have given my #col2 a min-height of 400px which looks good even when the font-size is set to large in Explorer. Doing this ensures that the main content will never be below 400px.
Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.
Back to resources.