Content moving inline-block div with a height of 100vh

Question

I have a div with a height of 100vh, and a width in percentage. When I add content to this div (in the example some lorem ipsum), the div moves downwards. When the div is empty of content, it stays at the top of the screen.

Inspecting this does not reveal anything unusual that I can find - no margins, position changes or anything.

How to I get the div with content to stay at the top of the page?

 body { font-size: 0; } .thin, .wide { height: 100vh; display: inline-block; font-size: 0; } .wide { width: 61.80%; background-color: red; } .thin { width: 38.20%; background-color: green; } .wide p { margin: 0; padding: 0; font-size: 15px; } 

 <div> <div class="thin"> <div class="wide"> </div> <div class="thin"></div> </div> <div class="wide"> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span><span>Ab debitis earum error explicabo facilis fugit itaque, nobis officia optio pariatur perferendis quas quasi quibusdam quidem rerum similique voluptatem! Aliquam distinctio eos molestias natus nostrum ut voluptatem? Illo, quam!</span><span>Dolorem esse est impedit iusto maxime, neque officia voluptatum? Assumenda eos et facilis fugit incidunt inventore magni, maiores, minima modi mollitia nihil officiis quibusdam quisquam rem veniam vitae voluptatibus. Aut!</span> </p> </div> </div> 

Answer 1

Just add vertical-align: top to the CSS rule for the inline-block elements, namely, .thin and .wide .

By default, vertical-align is set to baseline . For an inline element with text, the base line corresponds to the bottom-most line of the text block, whereas for an empty element, the baseline is at the top where the text would start. This leads to the top of the empty elements aligning with the bottom of the text in the filled element.

Setting vertical-align: top solves the problem.

 body { font-size: 0; } .thin, .wide { height: 100vh; display: inline-block; font-size: 0; vertical-align: top; } .wide { width: 61.80%; background-color: red; } .thin { width: 38.20%; background-color: green; } .wide p { margin: 0; padding: 0; font-size: 15px; } 

 <div> <div class="thin"> <div class="wide"> </div> <div class="thin"></div> </div> <div class="wide"> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span> </p> </div> </div>