CSS Text Alignment to Right Problem

.v-captiontext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    font-weight: bold;
    text-align: right;          
}

I have a div as below and above is what I defined in css for this

<div class="v-captiontext">User ID :</div>

Below is the screen shot. Still it align left only but I want to align all fields to right pointing to text fields side.

    <div>
<div
    style="position: relative; overflow: hidden; height: 297px; width: 698px;">
<div style="top: 30px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 267px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 17px;"
    class="v-caption">
<div class="v-captiontext">User ID :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 15px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" disabled="disabled"
    class="v-textfield v-disabled" tabindex="0" type="text"></div>
<div style="top: 60px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 237px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 47px;"
    class="v-caption">
<div class="v-captiontext">First Name :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 45px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"></div>
<div style="top: 90px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 207px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 77px;"
    class="v-caption">
<div class="v-captiontext">Last Name :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 75px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"></div>
<div style="top: 120px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 177px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 107px;"
    class="v-caption">
<div class="v-captiontext">Phone :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 105px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"><开发者_如何学C;/div>
<div style="top: 150px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 147px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 137px;"
    class="v-caption">
<div class="v-captiontext">App ID :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 135px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"></div>
</div>
</div>

My CSS Code

.v-app-VaadinMainApplication,.v-app-VaadinApplication{
background-color: white;    
}
.top_header{    
    border: 1px solid #e78f08; 
    background: #f6a828 url(common/img/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;    
    height: 30px;
}
.v-caption-top_header .v-captiontext {
 color:white;
 margin-top:23px;
 margin-left:10px;
 font-size: 13px;
}

.intro_key{ 
    border: 1px solid #e78f08; 
    background: #F6F6F6 url("common/img/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
}
.v-caption-intro_key .v-captiontext{

    margin-top:25px;
    margin-left:5px;
    color: #000000; 
    font-weight: bolder;
    font-size: 100%;
    line-height: 200%;
    text-indent: 10px;

}
.v-textfield{
    border: 1px solid #467BB3;  
    background-color: #E8F1FB;
}
.v-app .v-textfield-focus{
    border: 1px solid #467BB3;  
    background-color: #E8F1FB;
}
.v-captiontext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    font-weight: bold;
    text-align: right;          
}

The divs should have a fixed width. If they do must be that alignment is reset to left later in the css.