HTML and CSS Reference
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.
This code works like a charm, as you can see in Figure 11-10.