How to Use the Clear Attribute to Control Page Layout for HTML5 and CSS3 Programming

There should be some way to make the form work right, regardless of the container's width. CSSS3 provides exactly such a mechanism that is easy to work with when designing your HTML5 pages.

The clear attribute is used on elements with a float attribute. The clear attribute can be set to left, right, or both. Setting the clear attribute to left means you want nothing to the left of this element. In other words, the element should be on the left margin of its container. Each label should begin its own line, so set its clear attribute to left.

To force the button onto its own line, set its clear attribute to both. This means that the button should have no elements to the left or the right. It should occupy a line all its own.

If you want an element to start a new line, set both its float and clear attributes to left. If you want an element to be on a line alone, set float to left and clear to both.

Using the clear attribute allows you to have a flexible-width container and still maintain reasonable control of the form design. The form can be the same width as the page and still work correctly. This version works, no matter the width of the page.

Here's the final CSS code, including clear attributes in the labels and button:

/* floatForm.css
 CSS file to go with float form
 Demonstrates use of float, width, margin, and clear
*/
fieldset {
 background-color: #AAAAFF;
}
label {
 clear: left;
 float: left;
 width: 5em;
 text-align: right;
 margin-right: .5em;
}
input {
 float: left;
 background-color: #CCCCFF;
}
button {
 float: left;
 clear: both;
 margin-left: 7em;
 margin-top: 1em;
 background-color: #0000CC;
 color: #FFFFFF;
}