Sent by Adam Hardy on 13 November 2003 14:02
On 11/12/2003 08:19 PM Steve Clay wrote:
> Wednesday, November 12, 2003, 12:53:24 PM, Adam Hardy wrote:
> AH> I'm trying to get two <div>'s to line up next to each other with
> AH> vertical-align set to middle but I am finding it fiendishly awkward.
>
> Unless you're applying it to table cells, or elements displayed as such,
> vertical-align will not do what you want here. Outside of the table cell,
> it only applies to inline elements sitting in the same line box (in a
> single line of text).
OK. I'm with you on that.
> AH> The div on the right contains an form input field and I want this to
> AH> align to the middle vertically of the div on the left.
> AH> It seems that having a fixed width is incompatible with this.
>
> Nothing to do with width, just a commonly misunderstood CSS property. This
> might get you started:
>
> <form name="profile" method="post" action="profile.do">
> <label for="email">An Email Address label which wraps and is about 30%
> wide.</label><input id="email" type="text" name="email" />
> <div style="clear:left"></div>
> </form>
>
> label {float:left; width:30%;}
> #email {margin:.5em 0 0 .5em; }
Doh! I knew about labels, but for some reason they didn't occur to me.
So on the third day I made my form again, and I saw that it was good!
Except two minor points. If you look at what I've done,
http://www.cyberspaceroad.com/test2.html
where I have used what you suggest, you see that the label springs out
of its container downwards when it wraps, which then gets in the way of
the row below and causes the label below to shift to the right, out of
position.
Is that easily fixed? As you mentioned above perhaps by applying
display:table-cell? (I can't get any result with it though - I assume
because they are not inline).
The other problem occurs when the label text doesn't wrap. Then the
input field is aligned too low. I shall play with it for a while to see
what I can do.
Any more help would be much appreciated again. Thanks v. much.
Adam
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
