HTML and CSS Reference
In-Depth Information
.sidebar {
float: right;
width: 25%;
}
4.
Save styles.css.
As you can see in Figure 8-4, although you created two columns, the layout isn't quite right. The reason is that now
all the elements within the main element are floating; there's nothing clearing the elements below it. Consequently,
those elements are trying to flow to the sides of the columns.
Figure 8-4
The two columns floating side by side, but elements below that aren't being cleared.
This is the “hacky” nature of creating columns with floats, and you can find many ways around this issue.
You may think that clearing the footer
<footer id=”footer” role=”contentinfo”>
element would
seem to work because that is the element that follows on from the floating elements.
To do that, you could add the following to the
#footer
rule set:
