Creating a single-column layout

Everything you’ve seen so far has been a single-column layout. There’s only
one column, aligned on the left of the page. You can, however, control that
alignment with CSS. Doing so means creating more complex HTML than
you’ve seen so far but nothing in the HTML will be new; there’ll just be more
HTML than before.
1. Open a text editor.
Open your text editor and create a new empty document.
2. Within the empty document, enter the following HTML:
<!doctype html>
<html>
<head>
<title>Single Column</title>
<link rel=”stylesheet” type=”text/css” href=”single.
css”>
</head>
<body>
<div id=”container”>
<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> <!-- end container -->
</body>
</html>
3. Save the file.
Save the file as single.html in your document root.
4. Open your browser and view the page.
View the page by going to http://localhost/single.html in your
browser.
5. Create a new text document.
Create a new empty text document in your text editor.
6. In the document, place the following CSS:
body {
font-family: arial,helvetica,sans-serif;
}
#container {
margin: 0 auto;
width: 600px;
background: #FFFFFF;
}
#content {
clear: left;
padding: 20px;
}
7. Save the CSS file.
Save the file as single.css in your document root.
8. Open your web browser.
Navigate to http://localhost/single.html in your browser.