Выравнивание Div по горизонтали, остановить плавающий в окне изменения размера

Question

Очень глупый простой вопрос, я знаю, но .. извините :)

У меня есть 2 DIV, один для списка слева и один для деталей справа. Когда я изменяю размер окна, div справа плавает под первым, я хотел бы сохранить выравнивание даже с помощью полосы прокрутки. Как добиться этого?

HTML

<div id="parent"> 
    <div id="list"> 
     ...table list... 
    </div> 
    <div id="details"> 
     ...table details... 
    </div> 
</div> 

CSS

#parent div{ 
    float:left; 
    clear:none; 
} 

Answer 1

Попробуйте это:

CSS:

.table{ 
    display:table 
} 

.table-cell{ 
    display:table-cell; 
} 

HTML:

<div id="parent" class="table"> 
    <div id="list" class="table-cell">...table list...</div> 
    <div id="list" class="table-cell">...table details...</div> 
</div> 

Это приведет к тому, что оба div будут выравниваться по горизонтали при изменении размера браузера.

Или держать его очень просто ...

CSS:

#parent > div{ 
    display:inline-block; 
} 

Answer 2

Я думаю, что добавление display:inline-block к вашему CSS будет исправить это.

EDIT: На самом деле, чтобы использовать этот метод, вы захотите удалить поплавок и дать обоим дочерним элементам это свойство отображения.

HTML

<div id="parent"> 
    <div class="my_block" id="list"> 
     ...table list... 
    </div> 
    <div class="my_block" id="details"> 
     ...table details... 
    </div> 
</div> 

CSS

.my_block { 
    display:inline-block; 
}