Выравнивание DIVs по горизонтали и по вертикали

Question

Я ищу способ создать базовый 2-х столбчатый макет блога, который позволяет divs быть встроенным по горизонтали, но также находиться непосредственно под div выше. Я пробовал с дисплеем: встроенный, а также плавающий divs, все еще не могу заставить его работать совершенно правильно. Не уверен, что это можно сделать только с помощью CSS, но здесь есть надежда

Пожалуйста, проверьте ссылки ниже, чтобы узнать, что я имею в виду, так как я уверен, что я не объяснил это наилучшим образом.

Что я ищу делать:

Что я получаю:

<div style="display:inline-block; width:400px;"> 
    <div style="padding:5px; margin:10px; background:#222;"> 
    <div class="small">date | name</div> 
    <div class="data">blah blah blah</div> 
    </div></div> 

С выше коде на дивы сидят хорошо рядом друг с другом, но им вытягивать данные из базы данных, поэтому каждый div будет иметь разную высоту

Answer 1

Эта вещь работает:

http://jsfiddle.net/8mxZe/

HTML:

<div class="container"> 
    <div class="left-aside"> 
    <div class="block one">ONE</div> 
    <div class="block two">TWO</div> 
    <div class="block three">THREE</div> 
    </div> 
    <div class="right-aside"> 
    <div class="block one">ONE</div> 
    <div class="block two">TWO</div> 
    <div class="block three">THREE</div> 
    </div> 
</div> 

CSS:

.block { 
    margin: 5px; 
    background-color: #22CCFF; 
} 
.left-aside, 
.right-aside { 
    width: 50%; 
} 
.left-aside { 
    float: left; 
} 
.right-aside { 
    float: right; 
} 
.left-aside .one { 
    height: 200px; 
} 
.right-aside .one { 
    height: 250px; 
} 
.left-aside .two { 
    height: 300px; 
} 
.right-aside .two { 
    height: 200px; 
} 
.left-aside .three { 
    height: 300px; 
} 
.right-aside .three { 
    height: 150px; 
} 

Answer 2

Используйте margin: auto; в своем css код.

<div style="text-align:center"> 
    <div style="margin:auto">Layer, der auch in Firefox und Opera zentriert wird</div> 
</div>