DIV's - two rows with an Asterisk in the center at the end of the row

Question

I have built a form using DIV's. I am happy with this as it works as I want it to. However I would like to have an asterisk vertically centered to the right of the two text box rows and put a bit of text against the asterisk to say one or both fields are required.

For example:

------------------!
ROW 1
------------------- *Asterisk here
ROW 2
------------------!

I thought the following code would would work but it seems to put the asterisk below everything. Can anyone offer me some advice?

My Css is:

div.wrapper { width:960px; }

div.left_column { width:304px; float:left; text-align: right; vertical-align:middle; background-color:#f5f5f5; margin-right:3px; margin-top:2px; padding-bottom:5px; height:3px; }

div.right_column { }

My code is below:

< meta:resourcekey="lblhousenumberResource1">

<div class="right_column"> 
<asp:TextBox ID="txthousenumber" runat="server" BorderColor="#E0E0E0"   
borderStyle="Solid" BorderWidth="1px" TabIndex="2"   
meta:resourcekey="txthousenumberResource1"></asp:TextBox>
</div> 

<div class="left_column"> 
<span>
<asp:Label ID="lblhousenumber" runat="server" AssociatedControlID="txthousenumber"   
 meta:resourcekey="lblhousenumberResource1"></asp:Label>
</span>
</div> 

<div class="right_column"> 
<asp:TextBox ID="txthousenumber" runat="server" BorderColor="#E0E0E0"   
borderStyle="Solid" BorderWidth="1px" TabIndex="2"   
meta:resourcekey="txthousenumberResource1"></asp:TextBox>
</div>  

*

Thanks

Phil

Answer 1

I think the only way to really do this right would be to do one of three things.

1) Wrap all 3 elements in a div, split right and left. Left will contain the two fields, Right will contain the asterisk. This should ensure everything is ordered correctly.

2) Set height values on all 3 elements, and then use vertical-align to center the asterisk in the middle. Right now it does not know that it should really be a tall div.

3) Use a Table. Seriously. They have a bad rap, but this is the exact situation in which they are quite useful and make sense. It may not be the semantically correct thing to do, but you would have been able to knock this out in a few minutes.