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