CSS - фиксированная ширина диапазон/дела

Question

Я пытаюсь макет контента для Всплывающего окна, но не имея много удачи

Я попытался использовать оба пролеты и встроенные див, но ни один из них, кажется, уважать ширина или минимальная ширина CSS

любые идеи?

Вот 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> 

и CSS

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

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

Я хотел бы, чтобы все элементы в столбце popupValue быть выровнены

есть JSFiddle здесь:

http://jsfiddle.net/NtK4Y/

Answer 1

Встроенный контент не может иметь ширину. Попробуйте использовать display: inline-block или используя display: block; float: left;

Я обновил ваш jsfiddle; посмотрите на http://jsfiddle.net/NtK4Y/1/

Answer 2

Используйте inline-block вместо inline.

Вы можете увидеть обновленный jsfiddle http://jsfiddle.net/NtK4Y/2/

Answer 3

float:left также может помочь вашей проблемы, они будут размещены рядом друг с другом.