CSS - larghezza fissa arco/div

Question

sto cercando di layout del contenuto di una finestra di dialogo pop-up, ma non avendo molta fortuna

Ho provato con entrambe le campate e div in linea, ma nessuno dei due sembra di rispettare la larghezza o la larghezza minima CSS

qualche idea?

Ecco il codice html

<div id="MessageBox" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 40.8333px; height: auto;" scrolltop="0" scrollleft="0"> 

<div class="popupKey">Bank Reference</div> 
<div class="popupValue"></div> 
<br> 
<div class="popupKey">Amount</div> 
<div class="popupValue">650.00</div> 
<br> 
<div class="popupKey">Currency</div> 
<div class="popupValue">GBP</div> 
<br> 
<div class="popupKey">PaymentDate</div> 
<div class="popupValue">02/06/2011</div> 
<br> 
<div class="popupKey">Remitter</div> 
<div class="popupValue"></div> 
<br> 
<div class="popupKey">Senders Reference</div> 
<div class="popupValue"></div> 
<br> 
</div> 

e il CSS

.popupKey 
{ 
    display : inline; 
    min-width: 150px; 
} 

.popupValue 
{ 
    display : inline; 
    min-width: 150px; 
} 

Vorrei tutti gli elementi nella colonna popupValue essere allineati

c'è un JSFiddle qui:

http://jsfiddle.net/NtK4Y/

Answer 1

Il contenuto in linea non può avere una larghezza definita. Prova a utilizzare display: inline-block o utilizza display: block; float: left;

Ho aggiornato il tuo jsfiddle; dare un'occhiata a http://jsfiddle.net/NtK4Y/1/

Answer 2

Utilizzare inline-block anziché inline.

È possibile vede aggiornato jsfiddle http://jsfiddle.net/NtK4Y/2/

Answer 3

Un float:left potrebbe anche aiutare il vostro problema, saranno posizionati uno accanto all'altro.