Adding the Left Column

Open the basiclayout.css file and create space 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.

Near 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 3. Adding the leftcol div

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

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