HTML and CSS Reference
In-Depth Information
FIGURE 8.15
A left-floating and
a right-floating ele-
ment together.
8
As you can see, when you put two floating elements together, they appear next to each
other. If you want the second one to appear below the first, you need to use the
clear
property as well as the
float
property in the rule, as shown in this style sheet:
Input
▼
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%; }
#second { clear: right; }
.bottom { clear: both; }
The additional
<div>
I've added has been given the ID second, so that it inherits all the
styles of the class
right
and also the style rule associated with the ID
second
. The result
is in Figure 8.16.
