Question

i need to align elements in two different div elements .

my css

    div.details-box {      
        display:inline-block;
        *display:inline;
        width:850px;    
        margin-right:100px;
        margin-left:200px;
        margin-top:50px;
        border:1px solid #000;
        background:#eee;
        border-radius:5px;
        -moz-border-radius:5px; 
       direction:rtl;      
   }
   div.details-box div.row
   {
      display:block;    
      width:850px;
      margin:auto;
      margin-bottom:8px;            
      border:2px solid red;
      padding-right:150px;
   }
   div.details-box div.row div.inline-wraper
   {
      display:inline-block;   
      width:250px;
      border:1px solid blue;    
   }

my html:

<div class="details-box">
   <div class="row"> 
       <div class="inline-wraper">
           <span> element 1 </span>
           <asp:TextBox ID="txt_pwd" runat="server" TextMode="Password"></asp:TextBox>   
       </div>
   </div>
   <div class="row"> 
       <div class="inline-wraper">
           <span> element 2 </span>
           <asp:TextBox ID="txt_pwd" runat="server" TextMode="Password"></asp:TextBox>   
       </div>
   </div>
</div>

an example of 2 unaligned inline-wrapers

i’m looking for a way to re-size my spans so the inline-wrapers would “align” on top of each other , or some different approach of archiving this with out playing with the padding
of the top one to fit the full width of the wraper(the reason for that is that it’s a reoccurring problem).

i hope this was clear enough
thanks in advance
eran.

Answer 1

Not sure if I clearly understood your question.

Anyway, if you don’t care about having an fixed width for your span you could use:

span {
   width: 90px;
   float: right;
}

If fixed width is an problem, maybe you could use a <table>.