HTML and CSS Reference
In-Depth Information
iStockphoto's search results page (above) is a similarly-structured grid of
photos, but this time the photos are contained in left-floated
<div>
elements, instead of
<li>
elements.
ALIGNING AN
<INPUT>
FIELD WITH A BUTTON
Default styling on form elements across di
"
erent browsers can be a pain to
deal with. Often times, in a single-field form like a search form, it is
necessary to place the
<input>
element next to the submit button. Here is
a simple search form, with an image used for the submit button:
In every browser, the result is the same: The button appears slightly higher
than the input field. Changing margins and padding does nothing. The
simple way to fix this is to float the input field left, and add a small right
margin. Here is the result:
Conclusion
As was mentioned at the outset, without the CSS
float
property, table-less
layouts would be, at worst, impossible, and, at best, unmaintainable. Floats
will continue to be prominent in CSS layouts, even as CSS3 begins to gain
prominence — even though there have been a few discussions about
layouts without the use of floats.
Hopefully this discussion has simplified some of the mysteries related to
floats, and provided some practical solutions to a number of issues faced by
CSS developers today.
