Positioning Content - Learn to Code HTML and CSS: Develop and Style Websites - page 75

of three columns between our <header> and <footer> elements. If we drop our
<aside> element and use three <section> elements, our HTML might look like this:
1. <header>...</header>
2. <section>...</section>
3. <section>...</section>
4. <section>...</section>
5. <footer>...</footer>
To position these three <section> elements in a three-column row, instead of floating
one column to the left and one column to the right, we'll float all three <section> ele-
ments to the left. We'll also need to adjust the width of the <section> elements to ac-
count for the additional columns and to get them to sit one next to the other (see Figure
5.3 ) .
1. section {
2. float: left;
3. margin: 0 1.5%;
4. width: 30%;
5. }
Figure 5.3 A three-column page layout using floats
Here we have three columns, all with equal width and margin values and all floated to
the left .
Clearing & Containing Floats
The float property was originally designed to allow content to wrap around images. An
image could be floated, and all of the content surrounding that image could then naturally
flow around it. Although this works great for images, the float property was never actually
intended to be used for layout and positioning purposes, and thus it comes with a few pit-
falls.