Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Designing with CSS – Part 4: Preparing Your Page for Debugging

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 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 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.

Dreamweaver 8 has a fantastic new feature that can do this for you at the click of a button—no more manually adding debugging colors for Dreamweaver 8 users! By accessing the “Visual Aids” icon on the document toolbar, you can simply switch on background colors and Dreamweaver 8 handles the rendering for you.

Coloring your divs to make them easily seen—and easily debugged

Figure 1. Switching on the CSS Layout Backgrounds

The CSS Layout Background colors are applied at random, in this instance you can see that our content div has been given a green background color.

Coloring your divs to make them easily seen—and easily debugged

Figure 2. Dreamweaver 8 in CSS Layout Backgrounds mode

The screen shot in Figure 2 is taken in the Dreamweaver 8 Design view. 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 by the CSS Layout Backgrounds.

If you give the content div a background color of red—or any color of your choice—and preview this page in Microsoft Internet Explorer, 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 green content div background you see in Figure 2 is from the margin setting on the #content h1 selector. Change the value of that property to see how it affects your page layout. The new CSS features in Dreamweaver 8 are great, though you should always test in as many browsers as you can. One of my favorite new CSS features in Dreamweaver 8 is the “CSS Layout Outlines.” I have this feature switched on permanently so I can see exactly what is going on in my page as I design.

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