Rock-solid CSS Layouts

The Main Content Section

The main content section comes next, contained in a div with an id of content:

Example 8.3. index.html (excerpt)  
 
<div id="content">  
 <h2>Simon Says</h2>  
 <p>Simon Mackie tells us how a change of shoes has given him new  
     moves and a new outlook as the new season approaches.</p>  
 <p><a href="">Read More</a></p>  
 <h2>Recent Features</h2>  
 <ul>  
   <li>  
     <h3>Head for the Hills: Is Altitude Training the  
         Answer?</h3>  
     <p>Lachlan 'Super Toe' Donald</p>  
     <p>Vestibulum ante ipsum primis in faucibus orci luctus et  
         ultrices posuere cubilia Curae; Praesent hendrerit  
         iaculis arcu.</p>  
     <p><a href="">Full Story</a></p>  
   </li>  
   <li>  
     <h3>Hack up the Place: Freestylin' Super Tips</h3>  
     <p>Jules 'Pony King' Szemere</p>  
     <p>Vestibulum ante ipsum primis in faucibus orci luctus et  
         ultrices posuere cubilia Curae; Praesent hendrerit  
         iaculis arcu.</p>  
     <p><a href="">Full Story</a></p>  
   </li>  
   <li>  
     <h3>The Complete Black Hat Hacker's Survival Guide</h3>  
     <p>Mark 'Steel Tip' Harbottle</p>  
     <p>Vestibulum ante ipsum primis in faucibus orci luctus et  
         ultrices posuere cubilia Curae; Praesent hendrerit  
         iaculis arcu.</p>  
     <p><a href="">Full Story</a></p>  
   </li>  
   <li>  
     <h3>Five Tricks You Didn't Even Know You Knew</h3>  
     <p>Simon 'Mack Daddy' Mackie</p>  
     <p>Vestibulum ante ipsum primis in faucibus orci luctus et  
         ultrices posuere cubilia Curae; Praesent hendrerit  
         iaculis arcu.</p>  
     <p><a href="">Full Story</a></p>  
   </li>  
 </ul>  
</div> <!-- content -->

This area will contain the large image with a text overlay that highlights a feature story. Four news items will be listed below this.

The Sidebar

Finally, let's add the sidebar, which contains a search box and some important dates:

Example 8.4. index.html (excerpt)  
 
<div id="sidebar">  
 <h3>Site Search</h3>  
 <form method="post" action="" id="searchform">  
   <div>  
     <label for="keywords">Keywords</label>:  
     <input type="text" name="keywords" id="keywords" />  
   </div>  
   <div>  
     <input type="submit" name="btnSearch" id="btnSearch" />  
   </div>  
 </form>  
 <h3>Coming Events</h3>  
 <ul>  
   <li>10 Apr 06 -<br /><a href="">Seattle Zone  
       Qualifier</a></li>  
   <li>13 Apr 06 -<br /><a href="">World Cup - Round 8</a></li>  
   <li>21 Apr 06 -<br /><a href="">FootbagOOM 05 - NY</a></li>  
   <li>28 Apr 06 -<br /><a href="">WFPA AGM - Hong Kong</a></li>  
   <li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>  
 </ul>  
 <h3>Move of the Month</h3>  
 <h4>The Outer Stall</h4>  
 <p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper  
     quam. Sed cursus vestibulum leo.</p>  
 <p><a href="">more</a></p>  
</div> <!-- sidebar -->

This completes our markup for the homepage of the site. Save your page and view it in your browser. The content of your document will display using the default styles for the elements that we've used, as Figure 8.3 illustrates. It won't be pretty, but it should be easily readable!

Our last job before we start to add the CSS that will create the design we see in the example graphic is to validate our markup. By validating the document at this point, we'll know that we're adding CSS to a valid document: we won't come up against problems caused by existing invalid markup.

Figure 8.3. Displaying the page after the content is added

Positioning the Page Elements

We can now begin to create our style sheet. But, before we do, we need to take a moment to understand some basic concepts that come into play when creating layouts such as this (and many others): the display property, the concept of positioning, and the CSS Box Model technique.

The display Property

Before we can move on to look at CSS positioning issues, we should take a quick look at the display property, as it can have a significant impact on page layout.

The display property determines how a browser displays an element—whether it treats it as a block, an inline text fragment, or something else. Although it can be assigned any of 17 legal values, browser support realities confine the list to six, only four of which are really important. For a full reference to display see Appendix C, CSS Property Reference.

The six possible values for the display property are:

• block
• inline
• list-item
• none
• table-footer-group
• table-header-group

The default value varies from element to element. Block elements such as p, h1, and div default to block, while inline elements (those that would normally occur within a section of text ), such as strong, code, and span, default to inline. List items default to list-item. Assigning non-default settings to elements can produce interesting and useful effects. Later in this book, we'll see how we can use display: inline to cause a list to display horizontally.

If you supply a value of none, the element to which it applies will not display, and the space it would normally occupy will be collapsed. This differentiates the display: none declaration from the visibility: hidden declaration, which is commonly used to hide an element but preserve the space it would occupy if it were visible.

Absolute, Relative, and Positioning Contexts

The CSS position property takes on a single, constant value that determines how the block is positioned on the page. The two most frequently used values are absolute and relative. Another value, static, is the default value for this property; the fourth value, fixed, is not supported by Internet Explorer 6.

Positioning in CSS can be confusing because the points that are referenced to guide a block's placement on the page change in accordance with the positioning context of the block. There's no universal set of coordinates to guide placement, even when you're using the absolute positioning value. Each time a block is positioned on the page with a position setting other than static, it creates for its descendants a new positioning context in which the upper left corner of its content area has the coordinates (0,0). So, if you use CSS to position an element within that block, its position will be calculated relative to that new coordinate system—its "positioning context."

The best way to understand this concept is to look at a few simple, interrelated examples. Let's start with a blank page. In this context, the upper left corner of the viewport—the viewable area of the browser window—is where the initial (0,0) coordinates are located. Let's place a simple piece of text in a div, as shown in Figure 8.4.

Figure 8.4. The first line of text

Here's the HTML fragment that produces the result shown above. The CSS properties top and left are used to position the div on the page, locating it 75 pixels from the top of the page, and indenting it from the left of the page by 125 pixels:

Example 8.5. positioning.html (excerpt)  
 
<div style="position: absolute; left: 125px; top: 75px;"  
   class="big">  
 This is the first line of text being positioned.  
</div>

Now, put a second div inside the first one, as shown here:

Example 8.6. positioning.html (excerpt)  
 
<div style="position: absolute; left:125px; top: 75px;"  
   class="big">  
 This is the first line of text being positioned.  
 <div style="position: absolute; left: 25px; top: 30px;"  
     class="big">  
   This is a second line.  
 </div>  
</div>

Figure 8.5. An element positioned inside a positioned block

The result is shown in Figure 8.5. Notice that the second line of text is indented 25 pixels from the left of the first line of text, because that first line sets the positioning context for the second: it's the parent element of the second line. Both lines are positioned absolutely; however, the first line is positioned from the top and left of the viewport, and the second line is positioned absolutely from the top and left of the first. Notice, too, that its font size is huge. Why? Take a look at the style rule for the big class, and you'll understand:

Example 8.7. positioning.html (excerpt)  
 
.big {  
 font-family: Helvetica, Arial, sans-serif;  
 font-size: 2em;  
 font-weight: bold;  
}

As the second div is a child of the first, its font size is calculated relative to that of the first div. The style rule defines the font as being of size two ems, which instructs the browser to render the text at twice the size it would otherwise appear. When that two em rule is applied to the first line, its size is doubled. But when it is applied to the second line, the font size of the first line is doubled to calculate that of the second.

We can correct this using an absolute font size constant:

Example 8.8. positioning.html (excerpt)  
 
.big {  
 font-family: Helvetica, Arial, sans-serif;  
 font-size: large;  
 font-weight: bold;  
}

The two divs should now share the same font size.

The page now has two div elements, one nested inside the other. Both use absolute positioning. Now, let's add a third element—this time, a span element that will be contained in the second div. Using relative positioning, the HTML looks like this:

Example 8.9. positioning.html (excerpt)  
 
<div style="position: absolute; left: 125px; top: 75px;"  
   class="big">  
 This is the first line of text being positioned.  
 <div style="position: absolute; left: 25px; top: 30px;">  
   This is <span  
       style="position: relative; left: 10px; top: 30px;">an  
       example of</span> a second line.  
</div>  
</div>

The result of this markup can be seen below. Notice that the words "an example of," which are contained in the span, appear below and slightly to the right of their original position. Relative positioning is always based on the positioned element's original position on the page. In other words, the positioning context of an element that uses relative positioning is provided by its default position. In this example, the span is positioned as shown in Figure 8.6. It appears below and to the right of where it would normally be if no positioning was applied—a case that's illustrated in Figure 8.7.

Figure 8.6. Example of relative positioning

Figure 8.7. The same example with the positioning removed

Don't worry if this concept still seems a bit confusing; we'll be looking at how these concepts work in practice as we create our layouts.