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: Floating the Content

Floating the Content

Your first job here is to locate the the two clearing divs in the basiclayout.html page and delete them.

To correct this problem, you will have to encase your content sections in a containing div. Because you will be using this selector more than once on your page, make it a class:

  1. Open the basiclayout.css file and create some empty space at the bottom.
  2. Type .container{ and press Enter.
  3. Type width: 99%; and press Enter.
  4. Type float: right; and press Enter.
  5. Type background-color: #6633CC; and press Enter.
  6. Type }.
  7. Save your work.

In Step 4 you float to the right the containers to which you apply this class. By doing this you avoid the problems caused by the clearing divs moving your content down below the left column. In Step 3 the width of 99% opens up the containers to almost the complete width of the content div. By not using a full width of 100% you avoid any possibility of the main content dropping down to find room to open to the given width. This scenario can occur if the browser introduces rounding errors into the page width.

Because you now have elements floated both left and right, make an adjustment to the footer div:

  1. Open the basiclayout.css file.
  2. Locate the #footer selector.
  3. Place the cursor immediately after the opening { and press Enter.
  4. Type clear: both;
  5. Save your work.

The clear: both property/value ensure that your footer is moved down below the content and leftcol divs, no matter which of these two elements is longer. (After you complete this tutorial, try changing the clear value to left and preview your page. Then, change it to right and preview your page again. This will give you a great visual example of how the clear value works.)

Now that you have created your class for the containing div, open basiclayout.html in the Code view. Take time to study the code shown in Figure 10. I entered a new div with the container class around each section of content (you will need to hand-code these two divs).

One div highlighted green, the other blue

Figure 11. One div highlighted green, the other blue

Once you make these changes to the basiclayout.html file, preview it in your browser (see Figure 11).

All done!

Figure 12. The footer div moved below the content div—you’re all done!

You can add a string of
tags to force the height of the left column (see Figure 12).

below the leftcol div

Figure 13. The footer div moved below the leftcol div


Remove all the
tags from the leftcol div and create content that is specific to that div by using a descendant selector. Create h1 and p selectors for that div and make sure your new selectors do not affect the content in the main area of your layout.

In Part 5, I show you how to remove the horizontal navigation and move it to the leftcol div. Best of luck implementing your h1 and p elements in the leftcol div. I’m sure you will do just fine.