Adding the Left Column

Open the basiclayout.css file and create room at the bottom to add a new selector. Once you do this, complete the following steps:

1. Type #leftcol{ and press Enter.
2. Type width: 170px; and press Enter.
3. Type height: 150px; and press Enter.
4. Type background-color: and select yellow from the color palette.
5. Type ; and press Enter.
6. Type } and press Enter.

Your newly created selector should look like the code below:

#leftcol{
   width: 170px;
   height: 150px;
   background-color: #FFFF00;
   }

Note: As I stated in Part 2 , use the height property with caution. I am using it here only to open up the leftcol div so that you can see where it is on the page and how much space it occupies.

At around line 24 in the basiclayout.html file you will see the opening content div tag, and just above this you will see the closing nav div tag. Make some space between the two and add the leftcol div (see Figure 2). The leftcol div should be in between the closing nav div tag and the opening content div tag, as you can see commented in Figure 2.

Figure 2. Adding the leftcol div

Once you have done this, save your work and preview it in your browser (see Figure 3).

Figure 3. The yellow leftcol div added above the content div

This is not exactly what you were after! Figure 3 shows you the leftcol div in its natural position within the flow of the document. Once you add the float, the leftcol div will be removed from the document flow and the content div will move up as if the leftcol div doesn’t exist.

Adding the Float

Return to the basiclayout.css file and locate the #leftcol selector. By now you should be able quite easily to add a float property to this selector and give it a value of left. The selector should now look like the following:

#leftcol{
   float: left;
   width: 170px;
   height: 150px;
   background-color:#FFFF00; 
  }

Save your CSS file and preview your page in the browser (see Figure 4).

Figure 4. The yellow leftcol div within the content div

In Figure 4 the content div has now moved up, despite the fact that the leftcol div sits above it in the XHTML code. The leftcol div has been moved out of the document flow and has no effect on the content div.

Of course, the banner precedes the leftcol div in the XHTML code, so the fact that the leftcol div is floated has no bearing on that element. If you placed the leftcol div above the banner in the XHTML code, you would see an entirely different behavior because then the leftcol div would also be floated around the banner. Move the leftcol div above the banner div in the XHTML code and see what happens to the page layout in the browser.