HTML and CSS Reference
In-Depth Information
Figure 11-9.
After floating
label
elements, some parts of our form seem to spill out of their
containing
fieldset
.
Whoops! That's not right. Some of the form controls are not contained within their associated
fieldset
. The reason for this is our decision to float the
label
elements to the left. Floating an
element takes it out of the normal flow of the document, causing the
fieldset
elements to not
expand and contain them. One way to work around this behavior is to have an element at the
end of the
fieldset
“clear” the floats. Doing so will cause the parent
fieldset
element to stretch
vertically and contain the form controls. We've strategically placed
br
elements at the end of
each
fieldset
for exactly this reason. Ideally, you'd place the
clear
on an element that already
exists, but since no such element exists, the
br
element is a semantically sound one to add.
br {
clear: both;
}
This code works like a charm, as you can see in Figure 11-10.
