понедельник, 24 декабря 2012 г.

CSS Magic: Align Form Fields Without Tables


I’ve seen many a source code that is neat and XHTML-compliant everywhere except—for some mysterious reason—forms. There is some unspoken rule that tables are the only way to align form fields into two even columns. That rule is wrong. Without further ado, here is how to rid your pages of the final vestiges of layout tables (tested in Firefox 3 and IE6, the best and worst of all possible worlds):
HTML:

<div class=”field_container”><label>First Name</label><input type=”text”></div>
<div class=”field_container”><label>Last Name</label><input type=”text”></div>
CSS:
label {
width:150px;    
/*Or however much space you need for the form’s labels*/
    float:left;
}
I’m serious, that’s it. So if I see another table, YOU’RE FIRED. :)

Комментариев нет: