HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

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.

image0.jpg

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;
}

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: