Creating a two-column layout

A two-column layout uses a bit more HTML to achieve the effect of multiple
columns. This is frequently done to add a menu along the side of a page or
links to other stories or content.
the HTML involved for a two-column fixed-width layout.
#A Two-Column Fixed-Width Layout

<!doctype html>
<html>
<head>
<title>Two Column</title>
<link rel=”stylesheet” type=”text/css” href=”double.css”>
</head>
<body>
<div id=”container”>
<div id=”mainContainer”>
<div id=”content”>
<h2>Here’s some content</h2>
<p>This is where a story would go</p>
<h2>Here’s more content</h2>
<p>This is another story</p>
</div> <!-- end content -->
<div id=”sidebar”>
<h3>Menu</h3>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</div> <!-- end sidebar -->
</div> <!-- end mainContainer -->
</div> <!-- end container -->
</body>
</html>

This HTML uses the container <div> from the single-column layout and
adds another container <div> to hold the content. That <div>, called
mainContainer, holds both the content and the sidebar. The other
addition is the sidebar itself, aptly titled sidebar. That sidebar holds a
menu with an unordered list (<ul>) in it.The CSS for the two-column layout.

CSS for a Two-Column Fixed-Width Layout

#container {
margin: 0 auto;
width: 900px;
}
#mainContainer {
float: left;
width: 900px;
}
#content {
clear: left;
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
}
#sidebar {
float: right;
width: 260px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
background-color: #CCCCCC;
}

This CSS uses several of the items that you’ve seen already, including
margin, padding, clear, and background-color, among others. New to
this CSS are the float and the display properties.
The float property defines whether an element will move or float within a
layout, either to the left or to the right or whether it won’t float at all (none),
as is the default. However, because you want to create two columns next
to each other, you need to float the content container to the left and the
sidebar to the right. Therefore, if you want the sidebar to appear on the
right, you simply need to swap float: left in the #content CSS with the
float: right found in the #sidebar’s CSS.
The display property sets how the element should be displayed. Certain
elements are known as block-level elements and display the entire width of
the page. The <div> element is a good example of this. Because you want to
make the columns appear next to each other, you need to change this block
display behavior to inline (we introduce inline elements in the preceding
chapter), so that the element doesn’t extend the full width of the page.