Conflicting Input Design

[elmstreet]

I'm using 2 different kind of input designs:

1. text field for search (should be centered)
2. other fields for profile (should be left)

they conflict. how can I achieve, that first is centered, and the other is aligned left?

[rocknbil]

Welcome aboard elmstreet, create a class and assign it.

<input type="text" name="srch_fld"_ id="srch_fld" class="txt_input">
<textarea name="profile" id="profile" class="txt_area"></textarea>

.txt_input { margin:auto; text-align: center; }
.txt_area { text-align: left; }

Actually, you shouldn't have to do anything with .txt_area, it should naturally align left unless you have some parent container causing it to center.

[Xapti]

I would assume he wanted them on the same line, since if they aren't on the same line it's pretty easy, and I would think he would know it or figure it out himself.
One thing you can do is absolute positioning,
another is to do what was done there, but add a position:relative to one of them, to move it up/down to the same line as the other.

absolute positioning would go like this:
<div style="position:relative;height:A units"><input1 style="position:absolute;left:0;"><input2 style="position:absolute;width:B units;left:50%;margin-left:-B/2 units;"></div>

[edited by: Xapti at 2:36 am (utc) on Sep. 30, 2007]