水平和垂直对齐DIV

Question

I'm looking for a way to set up a basic 2 column blog-type layout which allows for divs to be inline horizontally but also to be directly under the div above. I've tried with display:inline and also floating the divs, still cant get it to work quite right. Am not sure if this can be done with CSS alone, but here's hoping

Please check the links below to see what i mean, as I'm pretty sure I haven't explained it the best way possible.

What I'm looking to do:

What I keep getting:

<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>

With the above code the divs sit nicely next to each other but im pulling data from a database so each div will have a different height

Answer 1

This thing works :

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

Use margin: auto; in your css code.

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