HTML and CSS Reference
In-Depth Information
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
now:
1.
In styles.css, find the
#content
rule set and add the following:
float: left;
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”
class=”group”>
.
Figure 8-3
The content box floating to the left of its containing element.
3.
In styles.css, add a new rule set:
