| ( | | | | Note that you do not have to be an expert in writing |
| There are many ways to design a two column layout | | | | HTML or CSS code. You just need some basic |
| using Cascading Style Sheets (CSS). This article takes | | | | working knowledge otherwise this tutorial will be |
| you through the steps of using one method. The | | | | incomprehensible. |
| code given here will also allow you to add an optional | | | | Using Float to Define 2 Columns |
| header and footer that spans both columns to your | | | | While there are many methods of using CSS to |
| pages should you wish. | | | | create a two-column site, this tutorial uses the float |
| Prerequisites | | | | property to move one column to the side of another. |
| For you to be able to use this article, you need to be | | | | In some ways, this method is more flexible than the |
| able to code directly in both HTML and CSS. If this is | | | | absolute positioning method currently used on It also |
| not the case, you may prefer to use a visual web | | | | allows you to add optional header and footer bars |
| editor to design your site instead. For example, | | | | that span both columns if you wish. |
| Dreamweaver comes with numerous templates to | | | | Compatibility |
| build 2 or 3 column websites using CSS. My | | | | The two-column CSS given here has been tested to |
| Dreamweaver Tutorial takes you through the steps | | | | work on Internet Explorer 6 and 7, Opera, Safari and |
| of creating a CSS-based two column website with | | | | Firefox ( Get Firefox with Google Toolbar ) |
| this editor. | | | | The HTML Code for a Basic 2 Column Website |
| My tutorials for the free web editors Nvu and | | | | The HTML part of the code is fairly simple. You |
| KompoZer can also be used to create 2 column sites, | | | | basically need 2 div blocks, one for each column. |
| albeit not using CSS. | | | | |