[SOLVED] Horizontal scroll making div place below

Horizontal scroll making div place below

I am trying to make a horizontal scroll website. This is the basic layout

<body>
    <div class="wrapper">
        <div class="page">
            <h3>Page 1</h3>
            <img src="../images/logonew.png">
        </div>
        <div class="page">
            <h3>Page 2</h3>
        </div>
        <div class="page">
            <h3>Page 3</h3>
        </div>
    </div>
</body>

And the CSS is

.page 
{
    display: inline-block;  
}

.wrapper {
    white-space: nowrap;
    overflow-y: hidden; // hide vertical
    overflow-x: auto;
    min-width: 100%;
}

The issue I have is this:

https://drive.google.com/file/d/0BwJbQuRrRywLMW9vVzNOQ2xmczQ/view?usp=sharing

As you can see, the Page 2 header and the Page 3 header are lower than on Page 1. I want them all in one line.

It can be really dumb also so please bear with me.

Thanks in advance.

Solution

The default alignment for inline-block is baseline...you just need to set it to top.

.page {
  display: inline-block;
  vertical-align: top;
}

<div class="wrapper">
  <div class="page">
    <h3>Page 1</h3>

    <img src="../images/logonew.png" />
  </div>
  <div class="page">
    <h3>Page 2</h3>

  </div>
</div>