Adding the Float

Return to the basiclayout.css file and locate the #leftcol selector. By now you should be able to quite easily 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 5. 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.