CSS Form Control - Lining up labels with their fields 1

[ruffy]

I've got 4 fields in the left side of a form's fieldset, and others on the right.
The ones on the right are tabled - and for now I'm not concerned with.
The left fields are nested inside label elements, such as:
<label>Name<input id='pname' type='text' size='32' /></label>

The CSS to control their layout is:
#p_left {float: left;}
#p_left label {width: 8em; display: block;}
#p_right {float: right;}

As of now, my textfields in the left portion are below their respective labels.
How do I get these fields to be on the same line as their labels? (Thanks)

 

[johnwm]

You have styled the label to <display:block>. That makes it a block level element so it will be on its own line.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Vragabond]

The HTML code you showed us does not show the #p_left element at all, so it is hard to determine. Also, how are your inputs styled? If they are block level or floated, that would mean they will appear on the next line.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

You've styled your <label> elements to be 8ems wide. You've coded the HTML to include the <input> within the <label>. Since 8ems isn't wide enough to include the label text and the <input> side-by-side, it's put the <input> on the next line.

Style your labels wide enough and it should work.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd