How to Create a Two Column Layout for Your Website Using CSS

2 Columns Using Float, with Optional Header and Footer


How to Design a Two Column Layout for Your Website Using CSS

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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 Two Column 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.

Using Float to Create a Two-Column Effect

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 Code for a Basic 2 Column Website

The HTML part of the code is fairly simple. You basically need 2 div blocks, one for each column.

<div id="container">
  <div id="content">Content here</div>
  <div id="navbar">Navigation</div>
</div>

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 Code for a 2 Column Website

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 website.

How It Works: Explanation of the CSS Code

The "float: right" rule causes the DIV block to be taken out of the document 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.

How to Put the Navigation (Side) Column on the Right

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.

How to Change the Width Correctly

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 One of Your Columns Drops Below The Other: How to Debug and Fix It

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:

How to Put a Top Header or a Footer Spanning Both Columns on a 2 Column Site

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.

<div id="container">
  <div id="header">Top Header</div>
  <div id="content">Content here</div>
  <div id="navbar">Navigation</div>
  <div id="footer">Bottom Footer</div>
</div>

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.

How to Make the Code Mobile-Friendly

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.

Conclusion

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-2017 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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Design a Two Column Layout for Your Website Using CSS





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.