A large number of Web sites that use tables for layout use two columns. The left column is for navigation, and the larger right column contains the content. Also, the page often contains a banner at the top for the title of an individual page, or for some kind of graphic or ad.
Breaking a Web page into three distinct areas is done with the div tag. The div tag is used define divisions or sections in an HTML document. So, a Web page using a two-column layout with a banner would be divided into three distinct sections.
So, how do you define the layout in CSS? First, create an empty file called twocol.css. Then, add the following code to the file:
div#bodyRight {
margin: 5px 25px 25px 225px;
width: 75%;
}
The bodyLeft division defines the column on the left. As you've probably guessed, the bodyRight division defines the column on the right that will be used for content. The division labelled topBanner defines the space at the top of the Web page for the page's title or for some kind of graphic or ad.
But what about the hash signs (#) before the names of the divisions? The hash signs are CSS selectors, which tell a browser to apply the style to a specific HTML tag, in this case.
The width properties specify how wide you want each column to be. I chose the specific widths because having a menu take up half of a page makes no sense. You can fiddle with the column widths to suit your own purposes.
The position: absolute property simply sets the left column in conjunction with the right column. The left and right columns are fixed. If the left column is a menu and you want it to scroll downward with right column, you can change the position: absolute property to position: fixed.
Note that sometimes, Internet Explorer doesn't play well with the position: absolute property. In fact, using it may cause your columns of text to run together. If you are going to use a CSS layout with Internet Explorer, you should remove the position: absolute property from the stylesheet.
Using the Styles
Using the styles on your site is straightforward. In the header of a new HTML file, add the link to the CSS file, like this: