CSS - ancho fijo SPAN/div

Question

Estoy intentando a la disposición del contenido de un cuadro de diálogo emergente, pero no teniendo mucha suerte

He intentado usar dos vanos y divs en línea, pero ninguno de ellos parece que respetar el ancho o min-ancho CSS

¿Alguna idea?

Aquí está el código 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> 

y el CSS

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

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

Me gustaría que todos los elementos de la columna popupValue estar alineados

hay un jsFiddle aquí:

http://jsfiddle.net/NtK4Y/

Answer 1

El contenido en línea no puede tener un ancho definido. Intente usar display: inline-block o usando display: block; float: left;

He actualizado su jsfiddle; Echa un vistazo a http://jsfiddle.net/NtK4Y/1/

Answer 2

Usa inline-block en lugar de inline.

Puede ver firmware jsFiddle http://jsfiddle.net/NtK4Y/2/

Answer 3

Un float:left también podría ayudar a su problema, que serán colocados uno junto al otro.