HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [111]
Things get worse when the page is a little wider, as you can see in Figure 1-11.
Figure 1-10: The form looks great when the page is skinny.
Figure 1-11: With a slightly wider browser, things get strange.
If you make the page as wide as possible, you’ll get a sense of what the browser was trying to accomplish in Figure 1-12.
When CSS doesn’t do what you want, it’s usually acting on some false assumptions, which is the case here. Floating left causes an element to go as far to the left as possible and on the next line, if necessary. However, that’s not really what you want on this page. The inputs should float next to the labels, but each label should begin its own line. The labels should float all the way to the left margin with the inputs floating left next to the labels.
Adjusting the fieldset width
One approach is to consider how well the page behaves when it’s skinny because the new label and input combination will simply wrap down to the next line. You can always make a container narrow enough to force the behavior you’re expecting. Because all the field elements are inside the fieldset, you can simply make it narrower to get a nice layout, as shown in Figure 1-13.
When you want to test changes in CSS, nothing beats the CSS editor in the Web Developer Extension. I made Figure 1-13 by editing the CSS on the fly with this tool. You can see that the new line of CSS is still highlighted.
Figure 1-12: The browser is trying to put all the inputs on the same line.
Figure 1-13: With a narrower fieldset, all the elements look much nicer.
Setting the width of the fieldset to 15em does the job. Because the widths of the other elements are already determined, forcing them into a 15em-wide box makes everything line up nicely with the normal wrapping behavior of the float attribute. If you don’t want the width change to be so obvious, you can apply it to the form element, which doesn’t have any visible attributes (unless you add them, such as color or border).
Unfortunately, this doesn’t always work because the user may adjust the font size and mess up all your careful design.
Using the clear attribute to control page layout
Adjusting the width of the container is a suitable solution, but it does feel like a bit of a hack. There should be some way to make the form work right, regardless of the container’s width. There is exactly such a mechanism.
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. That’s exactly what you want here. 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. Figure 1-14 shows that the form can be the same width as the page and still work correctly. This version works, no matter the width of the page.
Figure 1-14: When you apply clear to floating elements, you can control the layout.
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;