CODEWITHSUNDEEP
htmlcsshorizontal-scrolling
Hetu Nandu
Hetu Nandu

Reputation: 15

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>

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 am getting it this

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

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

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

Thanks in advance.

Upvotes: 0

Views: 39

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 1

Related Questions