Stylesheet alignment issue - asp.net

Question

I am using the following code to display lables and checkboxes/textboxes in my MVC application.
<div style="width:auto; clear:both;">
<div class="metadata-left">Default Domain: </div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.IsDefault) %></div>
<br />
<div class="metadata-left">Disabled:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.IsDisabled) %></div>
<br/>
<div class="metadata-left">Name:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.Name) %></div>
<br />
<div class="metadata-left">Domain Name:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.DomainName) %></div>
<br />
<div class="metadata-left">Forward Url:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.ForwardUrl)%></div>
<br />
<div class="metadata-left">Unsubscribe Url: </div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.UnSubscribeUrl)%></div>
<br />
<div class="metadata-left">Privacy Url:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.PrivacyUrl)%></div>
<br />
<div class="metadata-left">Brand Number:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.BrandNumber)%>
<%= Html.HiddenFor(c=>c.Id) %></div>
<br />
</div>
<div style="margin-left: 0; text-align: center; padding-top: 4%; clear: both;" class="saveArea">
Save or <a href="/Admin/EmailBlast/Domains" class="cancel">
Cancel</a>
<img src="/Content/img/loader.gif" style="display: none;" class="loading" />
</div>
But I am not getting the alignment right. See picture:
This is the stylesheet I use:
.metadata-left
{
float: left;
width: auto;
text-align: right;
display:block;
}
.metadata-right-domain
{
float: right;
width:auto;
padding-left: 3%;
text-align: left;
}
How can I get the right alignment?
EDIT: I display three DIVs side by side (one shown in the picture).

Answer 1

You need to give your DIV a width. Auto is not enough, so the div box is only as wide as the content. You can use % for your purpose.

Answer 2

It is a table. So just use table element to mark up this data:
<style>
.example TD {text-align: right; }
</style>
<table class="example">
<tr>
<th scope="row">Default Domain</th>
<td>example.com</td>
</tr>
<tr>
<th scope="row">Disabled</th>
<td>No</td>
</tr>
</table>
If you need, you can place multiple tables side by side. For example, with float property:
<style>
.example-tables TABLE {float: left; }
</style>
<div class="example-tables">
<table>
<!-- table 1 -->
</table>
<table>
<!-- table 2 -->
</table>
<table>
<!-- table 3 -->
</table>
</div>