Horizontally scrollable div container with smaller divs inside

Question

In my website I have a div container that contains smaller divs, and those smaller divs are lined up horizontally so that it scrolls horizontally. I want them to look like this,

+-Container------------------+
| +-a-+  +-b-+  +-c-+  +-d-+ |
| |   |  |   |  |   |  |   | |
| +---+  +---+  +---+  +---+ |
+----------------------------+

but somehow it looks like this:

+-Container------------------+
| +-a-+         +-c-+        |
| |   |  +-b-+  |   |        |
| +---+  |   |  +---+  +-d-+ |
+----------------------------+

And here's my css code:

#a,#b,#c,#d{
    display: inline-block;
    margin-left: 2.5%;
    height: 450px;
    white-space: normal;
}
#container{
    display: block;
    margin: auto;
    overflow-x: auto;
    white-space: nowrap;
    height: 450px;
}

It looks like the space on top is determined by the amount of content in each boxes (from playing around). Is there a way to force the boxes to stick to the top of the container when using horizontal scroll? Is this supposed to happen in the first place?

Answer 1

You have to change default vertical align value from baseline to top.

#a, #b, #c, #d{
  vertical-align: top;
}

Reference: vertical-align