Chrome rendering odd CSS layout (Firefox and IE are good)

Question

This is what my HTML page looks like in Firefox and IE:

And this is the same page in Google Chrome:

Here is the HTML code:

<div id="container">

  <div id="header">
    <div id="navigation">
      <ul>
        <li><a href="#">Info</a></li>
        <li><a href="#">My menu</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Manage</a></li>
      </ul>
    </div>
  </div>

  <div id="sidebar"></div>

  <div id="content">
    <div id="articles-overflow"> 
      <div id="articles-strip">

        <div class="article-month-column">
          <div class="article">
            <div>
              <h1>Article 1.1</h1>
              <p>
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
              </p>
            </div>
          </div>
          <div class="article">
            <div>
              <h1>Article 1.2</h1>
              <p>
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
              </p>
            </div>
          </div>
        </div>

        <div class="article-month-column">
          <div class="article">
            <div>
              <h1>Article 2</h1>
              <p>
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
                This is some idiotic text.
              </p>
            </div>
          </div>
        </div>

        <div class="article-month-column"></div>
        <div class="article-month-column"></div>
        <div class="article-month-column"></div>

      </div>
    </div>
  </div>

  <div id="footer"></div>

</div>

And here is the CSS for the red, yellow, violet, white and green containers.

#sidebar {
  float: left;
  width: 180px;
  height: 200px;
  background: blue;
}

#content {
  overflow: auto;
  display: block;
  background: red;
}

#articles-overflow {
  margin: 10px 5px;
  overflow: auto;
  display: block;
  background: yellow;
}

#articles-strip {
  white-space: nowrap;
}

.article-month-column {
  width: 224px;
  height: 450px;
  margin-right: 15px;
  background: darkviolet;
  display: inline-block;
  overflow: auto;
  white-space: normal;
}

.article {
  display: block;
  clear: both;
  margin: 0px 5px 10px 0px;
  padding: 10px;
  background: white;
  border-radius: 5px;
}

p {
  padding: 0px 7px 0px 0px;
  margin: 0px 0px 1em 0px;
  font-size: 7.5pt;
  text-align: justify;
  background: green;
}

Please, is there any way to fix this? I have been struggling with this for day now and I simply cannot understand why Google Chrome renders the page layout in such strange way. Any help is greatly appreciated. Thank you.

Answer 1

You just need to specify the vertical-align for those inline-block elements.

Also, there's a little bit of extra CSS you should have when using inline-block for older versions of IE.

.article-month-column {
  width: 224px;
  height: 450px;
  margin-right: 15px;
  background: darkviolet;
  display: inline-block;
  overflow: auto;
  white-space: normal;
  vertical-align:top;

  /*For IE*/
  *display: inline;
  zoom:1;
}