HTML and CSS Reference
The float and clear properties work together to allow for placing elements next to each other. When float and
clear were introduced to CSS, it became apparent that they could be used beyond their intended purpose for creat-
ing multiple columns that can sit aside each other.
The sidebar was intended to sit to the right of the main content on the Cool Shoes & Socks web page, so set that up
1. In styles.css, find the #content rule set and add the following:
2. Save styles.css.
Note that the <div id=”content” role=”main”> element was originally centered via the declaration
margin: 0 auto; , but this no longer applies because the float declaration takes precedence, and as
shown in Figure 8-3, the content box now floats to the left of its containing element <div id=”main”
Figure 8-3 The content box floating to the left of its containing element.
3. In styles.css, add a new rule set: