Preparing Your Page for Debugging

We investigated the float technique earlier in this series and now it’s time to use it to create a column in your design. Floating an image within a paragraph allows the text to move up alongside the image. There are two examples of this in the basiclayout.html file: one immediately below the h1 title and another immediately below the h2 title. Creating the second column works the same way: When you float the div that becomes the left column, the main content div can sit alongside it.

I discussed floats in depth in the “Working with Floats” section of Part 2 of this article. For the right-hand column, you will use the content div you created already in basiclayout.html. The wrapper div acts as the parent container rather than the p element in the example shown in Part 2.

It is a good practice to give your divs distinct background colors when laying out your design. This gives you a precise view of exactly what is going on in your page at even the quickest of glances. I find that using “debugging colors” in divs is an excellent way to monitor exactly what is going on in your page. Make this a habit now.

Create the #content selector. You will return to it on several occasions during the course of this tutorial, but for now just add a background color for debugging purposes and to give you a visual sense of what is happening with your page’s structure:

1. Open basiclayout.css in Dreamweaver and locate the #content p descendant selector (around line 56).
2. Place the cursor immediately above the selector code and press Enter a couple of times to make room in the code.
3. Type #content{
4. Type background-color: and select red from the color palette.
5. Type ;
6. Type }
7. Save your work.
8. Preview basiclayout.html in your browser.

The content div now has a background color of red (see Figure 1).

Figure 1. Coloring your divs to make them easier to see—and easier to debug

The screen shot in Figure 1 is taken in Mozilla Firefox. Notice how Image 2 extends outside the content div, and how easy it is to see the boundaries of the content div now that it is highlighted in red. If you preview this page in Microsoft Internet Explorer, however, you will see that the content div expands to include the height of Image 2. This is an example of IE getting the CSS specification for floats absolutely wrong. The cause of the white space above the red background you see in Figure 1 is from the margin setting on the #content h1 selector; change the value of that property to see how it affects your page’s layout.

On the next page you will return to the basiclayout.css file and add a div to create a left column.