Exercise

You can read about floats and clear for an eternity and feel like you have a good understanding of how they work, but like all things in web design, until you get out there and experiment yourself with how it all works together, you will struggle to fully grasp how powerful, useful and also downright frustrating floats can be. So let’s walk through a quick example together to see exactly how these properties work in the wild. If you get stuck at any point, just read the section again and give it another shot.

  1. Inside your index.html file add a new div and give it an id of ‘parent’.
  2. Inside the ‘parent’ element, add five new divs with the following ids: col1, col2, col3, col4, col5 (one per div).
  3. Give all of the divs the class of ‘col’.
  4. In your CSS file, write a new rule for the col class and give it a red background, a width of 50px and a margin of 20px.
  5. Now add a rule for the parent div with a width of 500px and a black border.
  6. Now give col1 a height of 500px and a left float.
  7. Give col2 a height of 400px and a left float.
  8. Give col3 a height of 300px and a left float.
  9. Give col4 a height of 200px and a right float.
  10. Give col5 a height of 100px and a right float.
  11. Now add a <p> tag after these divs and give it an id of ‘test’.
  12. Add some dummy text to the ‘test’ element, but make sure to put enough in to fill the entire width of your screen.

Note: it is generally best practice to make use of dummy text called ‘Lorem ipsum’ for testing website designs due to its non-distracting nature. Lorem ipsum can be found with a simple Google search and copying the text from one of the sources. A typical extract looks like this: ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.’

  1. 15  Save your files.

5.29 image

Now stop for a second. What do you expect to see when you opened your floats.html file in Google Chrome? Did you expect to see a nice-looking webpage with text flowing graciously between all of the floated elements? Because that’s exactly what we should see. The text should be flowing into every space it can find, just like Figure 5.29.

Let’s now experiment with forcing the text to start flowing after certain divs have been cleared:

  1. Go back in to your text editor and open your CSS file.
  2. Add a CSS rule for test and give it the property of clear: right.
  3. Give it a save and have a look at how your page now looks in Google Chrome.

You should now see the following (Figure 5.30):

5.30 image

Cool, right? We have now managed to start the text flowing after all of our right floated elements. Now let’s change the value of the clear property in our CSS to ‘both’, which should see the text clearing all of the divs and sitting on a nice new line all on its own (see Figure 5.31).

5.31 image

Hopefully this exercise highlights just how useful the clear property can be when working with floated elements. It has allowed us to emulate some of the behaviour of a block-level element on an inline element. The usefulness of this cannot be understated.

Floats can be extremely helpful, and equally nightmarish at the same time. It will be a while before you are familiar with all of its quirks, but that’s half the fun of learning HTML and CSS – working out the kinks and coming out the other side having learned a bit more about how it all fits together. You will be using floats a lot when building your websites, so it’s probably a good idea to develop a good patience technique now, ready for your first few attempts at using them in the real world.

What we have learned in this chapter

Now that you’re familiar with even more useful CSS concepts, it’s time to complete the journey in Chapter 6 with positioning, overlapping and overflow and (of course) more exercises.