View Full Version : What is the right CSS for this HTML

Apr 27th, 2010, 10:04 PM
If I have code like this that can not be changed:

<div class="form-item" id="edit-last-wrapper">
<label for="edit-last">Last: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="30" name="last" id="edit-last" size="20" value="" class="form-text required" />

what would be some good css technique to go from:

Last: *
[text field]


Last: * [text field]

Apr 27th, 2010, 10:22 PM
.form-item label, .form-item input {
float: left;

That'll do it.

Apr 27th, 2010, 10:23 PM
#edit-last-wrapper { overflow:auto; }
#edit-last-wrapper label, #edit-last-wrapper input{ float:left; }

edit ~ although you'll want a way of separating each labe/input else they'll all be in one line

i prefer using unordered lists to structure each line, <p> or <div> can work just as well.

>http://articles.sitepoint.com/article/fancy-form-design-css/2 is good

Apr 28th, 2010, 02:58 PM
Thanks a bunch :D That info helps a lot!

Apr 28th, 2010, 04:35 PM
Thanks a bunch :D That info helps a lot!
If my answer helped you, please click "thank user for this useful post" on my post. Thank you!