Rock-solid CSS Layouts

Move of the Month

The final element of the sidebar that we need to consider is the Move of the Month section at its bottom. This section includes an image; we need to add this to the document first. Insert it below the h4 and give it a class of motm-image:

Example 8.72. index.html (excerpt)        
       
<h3>Move of the Month</h3>        
<h4>The Outer Stall</h4>        
<img src="img/sidebar-player.gif"        
   alt="player demonstrating the outer stall move" height="110"        
   width="60" class="motm-image" />        
<p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam.        
   Sed cursus vestibulum leo.</p>        
<p><a href="">more</a></p>

Let's float this image to the right so that we can display the text to one side of the image:

Example 8.73. styles.css (excerpt)        
       
#sidebar .motm-image {        
 float: right;        
 margin: 0 30px 0 20px;        
}

As you can see, we've also added left and right margins to the image. The very last thing we need to do is to format the "more" link, which is very similar to the "Read More" and "Full Story" links in the rest of the layout. However, unlike those links, this link will normally appear next to a floated image. We want to ensure that it doesn't appear alongside the image: we want it always to display below. So, as you can see in the markup below, we use the clear: right declaration to ensure there are no floated elements to the right of the image. We'll also need to add the more class to the paragraph that contains the link:

Example 8.74. styles.css (excerpt)        
       
#sidebar p.more {        
 clear: right;        
 margin: 0 30px 0 0;        
 text-align: right;        
}

We'll be looking at clear in more detail in the next chapter. For now, note that it can take the values of left (clearing a left float), right (clearing a right float), and both (clearing both left and right floats). If you're using floated elements in your layouts, you'll find this a useful property.

The final rules, below, should be familiar to you from the other "Read More" and "Full Story" links:

Example 8.75. styles.css (excerpt)        
       
#sidebar p.more a:link, #sidebar p.more a:visited {        
 color: white;        
 background-image: url(img/more-bullet.gif);        
 background-repeat: no-repeat;        
 background-position: center left;        
 padding-left: 14px;        
}

This markup completes your two-column layout! The finished page display is shown in Figure 8.39.

Figure 8.39. The completed two-column layout

Repositioning the Sidebar

We can really start to appreciate the flexibility of CSS layouts when we decide to experiment! For instance, imagine that we want to see how this layout would look if we positioned the sidebar on the left, rather than the right. To do this, you'd need to make only two changes in your CSS.

First, locate the #content rule and change the values for margin: give it a 240-pixel left margin, rather than a 240-pixel right margin. Then, set the right margin to 0:

#content {        
 margin: 0 240px 0 0;        
 border: 1px solid #b9d2e3;        
 background-color: white;        
 color: black;        
}

Now, find the #sidebar rule and change the positioning declaration right: 0 to left: 0:

Example 8.76. styles.css (excerpt)        
       
#sidebar {        
 position: absolute;        
 top: 0;        
 left: 0;        
 width: 220px;        
 background-color: #256290;        
 color: white;        
 margin: 0;        
 padding: 0;        
}

Save your style sheet and refresh the page in your browser. The sidebar will now appear on the left-hand side of the content, as Figure 8.40 shows.

Figure 8.40. Repositioning the sidebar

Summary

We've covered a lot in this chapter! We began with an unstyled XHTML document, and after learning a little bit about the theory of using CSS for layout—in particular, absolute and relative positioning, margins, padding, and borders—we began to create a two-column layout using an absolutely positioned sidebar.

You now have a complete page layout that uses CSS positioning; it's the basic layout used by many of the sites we see on the Web every day. This layout method does have its limitations, though—we'll discover those, and discuss some alternative layouts, in the next chapter. However, if you need a two-column layout, this structure is robust and can be used as the basis for countless attractive site designs.

That's it for this excerpt from HTML Utopia: Designing Without Tables Using CSS, but there's still a lot more to learn! Earlier chapters of this title introduce the basics of CSS, from exploring the parts of a CSS rule, to using selectors, comments, expression measurements and more, to controlling aspects such as colors, fonts, and text effects. Validation of CSS markup is also covered.

Later in the book, you'll get to develop three-column layouts, fixed-width layouts, "zoom" layouts, and more. The books appendices, which include a CSS color reference, a CSS property reference, and CSS miscellany such as At-rules, are designed to help you as you develop sites using the techniques covered in the book. For more on this title, see the book's page, and don't forget: this chapter is available for download in PDF format.