[thelist] CSS - label tag

Maximillian Schwanekamp lists at neptunewebworks.com
Mon Feb 14 12:54:18 CST 2005


thelist at cjmarsh.com wrote:
>><http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html>
> This still uses the <br /> tags that I'm trying to avoid

FWIW, the two approaches I have taken are to put the input inside the 
label, or more often just wrap each label/input[/select/textarea] in a 
generic div, e.g.

HTML:
<div>
   <label for="txt_name">Name:</label>
   <input type="text" name="txt_name" id="txt_name" />
</div>

CSS:
form div {
   display: block;
   clear: both;
   margin: .5em 0;
}
/* for labels on same line as the form element */
div label {
   width: 8em;
   float: left;
   text-align: right;
   margin-right: 1em;
}
/* OR, for labels right above the form element */
div label {
   display: block;
   margin: 0;
}

Or something to that effect!  I do think that the label-input grouping 
does constitute a "logical DIVision" so I don't think it's overly 
presentational markup.

-- 
Maximillian Von Schwanekamp
http://www.neptunewebworks.com/



More information about the thelist mailing list