There are many ways to create a two column layout using Cascading Style Sheets (CSS). This article takes you through the steps of using one method. The code given here will also allow you to add an optional header and footer that spans both columns should you wish.
For you to be able to use this article, you need to be able to code directly in both HTML and CSS. If this is not the case, you may prefer to use a visual web editor to design your site instead. For example, my tutorials for Microsoft Expression Web (a free web editor), BlueGriffon (an open source web editor) and Dreamweaver (a commercial editor) take you through the process of creating a CSS-based two column website.
Note that you do not have to be an expert in writing HTML or CSS code. You just need some basic working knowledge otherwise this tutorial will be incomprehensible.
In addition, if you find reading this tutorial a chore, you can simply use the Free Layout Wizard to generate the necessary HTML and CSS code for you. The generated code has the additional advantage of being mobile-friendly, adapting automatically to the small screen of a smartphone and other mobile devices.
While there are many methods of using CSS to create a two-column site, this tutorial uses the
float
property to move one column to the side of another. In many ways, this method is arguably
easier to work with and more flexible than the absolute positioning method currently used on thesitewizard.com.
It also allows you to add optional header and footer bars that span both columns if you wish.
(In case you're wondering why I did not use this method for thesitewizard.com itself, I created the latter's layout in my early days of learning CSS, and did not have the benefit of the hindsight I have today. Don't worry. As mentioned below, I have made a couple of demo pages using this layout which you can check out later.)
The HTML part of the code is fairly simple. You basically need 2 div
blocks, one for each column.
The words "Navigation" and "Content here" are merely placeholders for the navigation side bar and main content.
You should remove those words when you put your real content. The "container" div
is merely
a block enclosing both the two columns, and is useful if you want to apply certain styles that affect both
columns as a unit.
The CSS below uses percent ("%") for the widths of both columns. Since they are measured in relative units, they will expand or contract to fill the entire browser window no matter how large it may be. At the time I write this, thesitewizard.com uses such a fluid layout for its right column as well. For example, if you change the size of your browser window, the software will reformat the article column as far as possible to fit within the window (unless you resize it too small).
The CSS code for this is simple.
#content { float: right ; width: 80% ; } #navbar { float: right; width: 20%; }
The CSS code has to go either into the style
section of your web page or an external style sheet.
You can see how the above code works out in practice on the Two Column Layout Demo.
The "float: right
" rule causes the DIV block to be taken out of the normal page flow (the default way
in which the elements on your page are arranged), and placed on the right with all other text and images flowing around it
on the left. The first DIV block to be encountered on the HTML page is floated first.
In the case of the page given above, "#content
" is first shifted to the right and given a width of 80%
of the browser width. Our next rule also floats "#navbar
" and shifts it to the right (yes, to the right, not left).
Since there is already a floated element in that position, this second block is placed to the left of that existing element
if there is sufficent space, otherwise it is placed below it. In view of this, the total of the width for both blocks must
equal to 100% or less, else there will not be enough space for both blocks to be positioned side-by-side.
The earlier code puts the navigation menu in the left column, just like what you see on all the pages of thesitewizard.com, including this very page you are reading. If you prefer that the navigation menu be on the right, as is commonly found in blogs, change the code so that it looks like the following:
#content { float: left ; width: 80% ; } #navbar { float: left ; width: 20% ; }
You can see this code at work in the Two Column Layout Demo by clicking the button to switch the navigation column to the right.
The above style sets the side column to 20% of the width of the browser window and the content column to 80%, giving a total of 100% (ie, 20% + 80%).
If you are planning to change the values to some other number, make sure that their total is equal to 100% or less, otherwise the browser will place one column below the other.
If you find that one of your columns is placed below the other, either in a staggered fashion or some other way, instead of being placed side-by-side, it means that the total width of both columns is more than 100% of the browser width.
This can happen even if you use my numbers "20%" and "80%" above. For example, if you have added margins, borders and padding to either or both your columns, the widths of those columns will increase accordingly, leading to a total exceeding 100%.
There are at least 2 ways to solve this:
Decrease the percentage used for the width of your columns until the browser renders it the way you want it to.
However, remember that percentage is a relative measurement.
It is tied to your visitor's browser window width. So just because you tested it on your system and found
that if you added (say) a "padding-left: 10px ;
" to one of your columns and decreased its width by 1%,
and everything still fits perfectly, you cannot conclude that 1% equals 10 pixels.
To put it another way, 1% of 1024 pixels is different from 1% of 1920 pixels, and so on. Make sure that
you make some allowance for the differences so that your columns will still appear beside each other on a
system with a different window width.
The solution I prefer is to create a nested DIV block within your "#navbar
" and "#content
" blocks
and put your padding, margin, border and real content there. That way, you can leave your percentages at 20% and 80% for
your outer blocks without the nuisance of including paddings, margins and borders in your calculations.
For example, in the Two Column Layout Demo, the following HTML code is used to create a nested DIV block.
Then, in addition to the CSS given earlier, the rules for "#innercontent
" and "#innernavbar
"
are specified as follows:
(The rules for "#content
" and "#navbar
" remain the same as described in the first half of this
tutorial.)
Since the padding is applied to the inner DIV block, the measurements for the outer ones remain unchanged, and the two column layout is preserved.
Some sites have a top header spanning both columns. They may either place the site's logo or name here, or, perhaps even banner advertisements, or both. Some sites also include a footer that span both columns. Among other things, the footer may be used for things like copyright notices.
To use a header and footer using this 2-column layout, modify your HTML code to include two additional DIV blocks.
Add the following CSS code to your existing style sheet. Simply place it after the styles you created earlier.
#footer { clear: both ; }
If you want the text in your header to be centred, add the following. Otherwise, there's no need to define a header style.
#header { text-align: center ; }
The same text-align
property can be added to the footer to centre the text there, if you wish.
You can see the above code in action (minus the text alignment in the footer) on the Two Column Layout with Header and Footer Demo.
If you want to find out how you can make the above code mobile-friendly, please read How to Make a Mobile-Friendly Website: Responsive Design in CSS and its second chapter, How to Make a Two Column Website Layout Mobile-Friendly.
With the CSS code given above, you're now on your way to creating your 2-column website. You may also wish to check out the CSS navigation menu bar wizard as well, if you wish to add a CSS-driven navigation menu bar to your side panel that has mouse-over hover effects.
Copyright © 2008-2024 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Design a Two Column Layout for Your Website Using CSS