In this tutorial, you'll create a multi-column, float-based layout. In the process, you'll create two- and three-column liquid designs, as well as a fixed-width design.
To get started, download the tutorial files located on this book's companion website at www.sawmac.com/css2e/. Click the tutorial link and download the files. All the files are in a ZIP archive, so you need to unzip them first. (Find detailed instructions on the website.) The files for this tutorial are in the 12 → layout1 folder.
The first step in creating a CSS-based layout is identifying the different layout elements on the page. You do this by wrapping chunks of HTML inside of <div> tags, each of which represents a different part of the page.
Open the start.html file in a text editor and click in the empty line following the HTML comment: <!--sidebar goes here-->.
As you can see, some of the HTML work is already done: Currently, there's a banner and footer. Before you create any styles, you need to add the structure and content for the page. You'll next add the <div> tag for the left sidebar.
Add an opening <div> for the sidebar: <div id="sidebar">. Then press Enter (Return) to create a new, empty line.
If you were creating a web page from scratch, at this point you'd add the HTML for the page's sidebar, perhaps a list of articles on the site, links to related websites, and so on. In this case, the HTML is already taken care of. The code for an unordered list of links is waiting for you in another file. You just need to copy and paste it into this page.
Open the file sidebar.txt, copy all of the contents, and then return to the start.html file. Paste the HTML after the <div> tag you created in step 2.
The HTML for the sidebar is nearly complete. You just need to close the <div> tag.
Immediately after the code you just pasted, type </div>.
You've just added the first layout element on the page. In a little bit you'll style this HTML so that it looks like a column. But first, you need to add some more content.
Place your cursor in the empty line after this HTML comment: <!--main content goes here-->, and then type <div id="main">.
This div holds the page's main content. You'll get that HTML from another file, too.
Open the file story.txt, copy all of the contents, return to the start.html file, and then paste the code after the <div> tag you just created. Add the closing </ div> tag exactly as in step 4.
That's all the HTML you need to create your design. Now it's time to turn your attention to building the CSS.
If you preview the page now, you'll see that the banner, navigation buttons, and text are already styled. That's because this page has an external style sheet attached to it with some basic formatting. Next, you'll create styles to format the page's columns.
In your text editor, click in the empty space directly before the closing </head> tag near the top of the file. Type <style type="text/css">, and then hit Enter (Return).
This code is the opening tag for an internal style sheet. As with the other tutorials in this book, you'll create your styles in an internal style sheet, which makes creating and testing your styles easier. Once you're done, you should move the styles into an external style sheet, as described on Linking a Style Sheet Using HTML.
Add a style for the sidebar element, like so:
#sidebar { float: left; width: 160px; margin-top: 10px; }This class style floats the sidebar div to the left of the page, gives it a width of 160 pixels, and adds a bit of space to separate the sidebar from the banner above. The width property is important in this style: Unless you're floating an image that has a set width, you should always set a width for a floated element. Otherwise, the browser sets the width based on the content inside the float, leading to inconsistent results.
Press Enter, and then type </style> to finish the internal style sheet. Preview the page in a web browser.
The sidebar now forms a left-hand column…sort of. When the text in the main column reaches the bottom of the sidebar, it wraps around the bottom of the sidebar, as shown in Figure 12-16. While that's normally how floats work, it's not what you want in this case. To make the main body text appear like a column of its own, you have to add enough left margin to indent the main text beyond the right edge of the sidebar.
Create a style for the second column:
#main { margin-left: 180px; }Since the sidebar is 160 pixels wide, a margin of 180 pixels indents the main content an additional 20 pixels, creating a gutter between the two columns. This additional white space not only makes the text easier to read, but also makes the page look better.
Preview the page now, and you'll see you've got yourself a two-column layout.
As you can see, a two-column design isn't hard. Adding a third column so you can treat your visitors to even more information isn't any harder. In fact, the steps are quite similar to the previous part of this tutorial.
Open the file secondary.txt. Copy all the HTML from that file, and then return to the start.html file.
The HTML for this next column goes between the page's two divs.
Click just after the closing </div> for the sidebar element (right before the HTML comment <!--main content goes here-->). Then press Enter to create an empty line.
It's often hard to find the right closing </div> when you use a lot of divs to structure a page. That's why HTML comments—like this one—can really help you identify and keep track of the HTML in your page.
Type <div id="secondary">, press Enter, and then paste the HTML you copied in step 1. Hit Enter again, and then type </div>.
When you close the <div> tag, you've completed the HTML for the page's third column. Start styling it next.
Below the # main style you created in step 4 on the previous page, add a new style to the internal style sheet:
#secondary { float: right; width: 180px; }You're floating this column to the right side of the page to flank the main content with sidebars on either side. The problem with the first column (Figure 12-16) appears here as well—the main content wraps underneath this new sidebar. To fix it, add a right margin to the #main style.
Edit the #main style so that it looks like this:
#main { margin-left: 180px;margin-right: 200px;}Now the page is a full, three-column layout. Test the page in a browser. When you resize the window, you'll see that the page adjusts to fit the window.
Note
In this design, the left and right sidebars are a fixed width, so even when you make the browser window much larger, they stay the same size. You can make those columns change width as well, simply by setting their widths to percentage values and changing the #main style's left and right margins to percentages as well.
That new column you just added doesn't look very good, so polish it up in the next section.
The right sidebar doesn't stand out enough visually. You'll fix that with a dark background color and some text formatting.
Edit the #secondary style you created earlier by adding a dark background color. The complete style should look like this:
#secondary { float: right; width: 180px;background-color: #294E56;}Now the right sidebar's background color really stands out, but the text, which is also dark, doesn't.
Add another style to the bottom of the internal style sheet to make all the text in this sidebar white:
#secondary * { color: #FFF; }This style takes advantage of the universal selector (Constructing Group Selectors). It essentially says, "Set the text color for every tag inside #secondary to white." It's a shorthand way of creating what would normally be a very long group selector: #secondary h1, #secondary h2, #secondary p, #secondary a, and so on.
Next, you'll create a few styles to help adjust the font size, margins, and other display properties of the text.
Add the following styles to the internal style sheet:
#secondary h3 { font-size: 1.5em; background: #73AFB7; padding: 3px 5px 3px 10px; } #secondary h4 { font-size: 1.2em; margin: 10px 10px 5px 10px; } #secondary p { font-size: 1.2em; margin: 3px 10px 10px 10px; line-height: 110%; }Each of these styles adjusts the font size for the different text tags used in the sidebar. In addition, you've added a background color to the headings that introduce each section in the sidebar. If you preview the page in a web browser now, it should look like Figure 12-17.
Figure 12-17. One of the biggest challenges with CSS layouts is making columns of equal height. In this example, the right-hand sidebar has a dark background that would look much better if it extended down the page. However, since there's more content in the middle section of the page, the right sidebar's background stops short (circled). Using a background image (instead of the background-color property) is the answer.
Note
The #secondary style—the one that defines the layout of this sidebar—has no padding added. But the text doesn't bump right up to the edges of the sidebar because the other styles add space between the edges of the sidebar and the text inside. Specifically, the padding in the h3 style and the margins in the h4 and p styles add the needed space, which has one benefit. Without padding on the sidebar, you can make the background color of the main headers in the sidebar ("In the News" and "Around the Web") span the entire width of the sidebar.
The sidebar presents one more hurdle—its background color stops short of the bottom of the page. Things would look much better if that dark color extended all the way down the window's right side.
The background color on the right sidebar needs a little help. To extend the color so that it fits the entire height of the page you need to put a graphic in the background of the page itself and tile it vertically, so no matter how tall the page gets, the background image stays visible.
Add a body tag style to the top of the internal style sheet:
body { background: url(images/bg/bg_column.gif) repeat-y right top; }The bg_column.gif file is a simple, solid color graphic that's the same width as the right sidebar. The repeat-y property makes the graphic tile up and down only, and the right value places the graphic on the right edge of the page.
Currently, the page is a liquid design (Types of Web Page Layouts), meaning that it expands to fill the entire width of the browser window. But say you'd rather have the page stay the same width all the time—because you hate how it looks on cinema display monitors, or you don't like what happens to the design when the browser window is shrunk too small. Changing a liquid design to a fixed-width design is easy. Start by adding a little more HTML.
Directly after the opening <body> tag (<body id="feature">) add a new <div> tag:
<div id="wrapper">
You're wrapping the entire page inside a div, which you'll use to control the page's width. You need to make sure that tag is closed.
Add the closing </div> just before the closing </body> tag:
</div></body>Now that there's a div surrounding all of the content on this page, you can control the page's width by setting a width for this tag.
Just below the body tag style you created earlier, add a style that defines a set width for the new div:
#wrapper { width: 760px; }Preview the page in a browser, and you'll see that the banner, footer, and other content on the page stays locked at 760 pixels. However, the image that adds the background to the right sidebar jumps around depending on the width of the browser window. That's because that graphic is aligned in relation to the right edge of the window. To fix this, just place the graphic as a background on the #wrapper instead.
Delete the body style you created in step 4 on the previous page. Add the background declaration to the #wrapper style, so it looks like this:
#wrapper { width: 760px;background: url(images/bg/bg_column.gif) repeat-y right top;}Preview the page in a browser. It should now look like Figure 12-18.
There's a completed version of this tutorial in the 12_finished/layout1/ folder.