Creating Layouts with Multiple Columns | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

Over the course of this lesson, you've seen how to modify many aspects of a page's design using cascading style sheets. Now let's look at an example that kind of ties everything together. In this case, we're going to see the sort of effect that might normally be accomplished using a table that encompasses the whole page implemented using CSS instead.

This page uses a two-column layout with a header across the top. One thing you'll be impressed by is the small amount of markup within the HTML. All the formatting is contained in the style sheet. Here's the source code for the page, which appears in Figure 9.23:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>The Star</title> <style type="text/css"> body { font-family: Georgia;     margin: 0px;     background-color: #f90; } #header { font: bold 48px Trebuchet MS;      padding-left: 30px;      border-bottom: 3px solid black;      background-color: #c00;      margin-bottom: 0px; } #content { float: right;       padding: 1px 20px 1px 10px;       width: 70%;       margin: 0px;       border: none;       background-color: #fff; } #nav { float: left;     width: 20%;     margin-top: 0px;     font-weight: bold;     padding: 10px;     border: none;     font-family: Trebuchet MS; } #nav a { text-decoration: none;      color: #006; } #nav a:hover { color: #c00; } h2 { margin-top: 10px; } </style> </head> <body> <div >The Star</div> <div > <h2>Curly Bill</h2> <h3>The Noted Desperado, Gets it in the Neck at Galeyville</h3> <p>May 26, 1881 - The notorious Curly Bill, the man who murdered Marshal White at Tombstone last fall and who has been concerned in several other desperate and lawless affrays in South Eastern Arizona, has at last been brought to grief and there is likely to be a vacancy in the ranks of out border desperados. The affair occurred at Galeyville Thursday. A party of 8 or 9 cowboys, Curly Bill and his partner Jim Wallace among the number, were enjoying themselves in their usual manner, when deputy Sheriff Breakenridge of Tombstone, who was at Galeyville on business, happened along.</p> <p>Wallace made some insulting remark to the deputy at the same time flourishing his revolver in an aggressive manner. Breakenridge did not pay much attention to this "break" of Wallace but quietly turned around and left the party. Shortly after this, Curly Bill, who it would seem had a friendly feeling for Breakenridge, insisted that Wallace should go and find him and apologize for the insult given. This Wallace was induced to do after finding Breakenridge he made the apology and the latter accompanied him back to the saloon where the cowboys were drinking. By this time Curly Bill who had drank just enough to make him quarrelsome, was in one of his most dangerous moods and evidently desirous of increasing his record as a man killer. He commenced to abuse Wallace, who, by the way, had some pretensions himself as a desperado and bad man generally and finally said, "You g-d Lincoln county s-of a b---, I'll kill you anyhow." Wallace immediately went outside the door of the saloon, Curly Bill following close behind him. Just as the latter stepped outside, Wallace, who had meanwhile drawn his revolver, fired, the ball entering penetrating the left side of Curly Bill's neck and passing through, came out the right cheek, not breaking the jawbone. A scene of the wildest excitement ensued in the town.</p> <p>The other members of the cowboy party surrounded Wallace and threats of lynching him were made. The law abiding citizens were in doubt what course to pursue. They did not wish any more blood shed but were in favor of allowing the lawless element to "have it out" among themselves. But Deputy Breakenridge decided to arrest Wallace, which he succeeded in doing without meeting any resistance. The prisoner was taken before Justice Ellinwood and after examination into the facts of the shooting he was discharged.</p> <p>The wounded and apparently dying desperado was taken into an adjoining building, and a doctor summoned to dress his wounds. After examining the course of the bullet, the doctor pronounced the wound dangerous but not necessarily fatal, the chances for and against recovery being about equal. Wallace and Curly Bill have been Partners and fast friends for the past 4 or 6 months and so far is known, there was no cause for the quarrel, it being simply a drunken brawl.</p> </div> <div > <a href="">News</a><br /> <a href="">Sports</a><br /> <a href="">Weather</a><br /> <a href="">Business</a><br /> <a href="">Classified</a> </div> </body> </html>

Output

Figure 9.23. A page laid out entirely using CSS.

As you can see, the page I created uses a two-column layout with a header across the top. If you take a look at the source code, you'll see that there are three <div>s that are used to lay out the page. One contains the heading (with the ID "header"), one is for the main content (with the ID "content"), and one is for the navigation elements (with the ID "nav"). Note that the navigation <div> actually comes after the content in the source file. I didn't have to do it this way, but there are good reasons to do so, as I'll describe in Lesson 17, "Designing for the Real World."

Let's go through the style sheet rule by rule. First of all, I set the font for the document to Georgia in the <body> tag. I also set the margins for the page to 0px and set the page's background color to the same background color that I'm going to use in the navigation div. I'll explain why in a bit.

Next, I set up the header. I set the font size to a nice, large, bold font, befitting the header for a page. Then I add some padding to the left side of the <div> to give myself a margin because I turned off margins for the page as a whole. I add some accents to the header by putting a 3-pixel border across the bottom and setting the background of the header to a dark red color. I also turn off the margin on the bottom to get things to fit together nicely.

The next rule is for the content section. This is the most important part of the page, so I set its width to 70%. I turn off its margin completely, and give it some padding on the left and right to create some white space around the text and a 1-pixel margin on the top and bottom because there's plenty of white space there already. The background color of this <div> is white and the borders are turned off.

Now let's look at the rules for the navigation <div>. I've this one set to float: left. One thing you may be wondering is why I have float turned on for both the content <div> and the navigation <div>. Things are set up this way so that the <div>s run down opposite sides of the page no matter what. I don't want one of them to wrap around the other, and I also wanted to be able to put the navigation <div> under the content <div> and have them both pushed all the way up against the header. If there were some unfloated text content for this page that was extremely skinny, or I made both of these <div>s narrower, I could run some content right down the middle of the page between them. If I did want to put some content on the page below the two <div>s, I'd need to make sure to use clear: both to eliminate the floats.

When you have two <div>s side by side on a page and you want them to appear as columns, you must set the page background color to match the background of the smaller <div>. That way, the background of the space below the smaller <div> will match that <div>.

The next two rules affect the links in the navigation bar. The links are set to be navy blue and to turn red when the user passes the mouse over them. I've also turned off underlining. The links were set to boldface in the larger rule for the navigation <div>. The last rule adjusts the white space for <h2> tags slightly to make it consistent between Netscape and Internet Explorer.