Search code examples
htmlcssalignment

Whay do my divs move down on the page when there they have text in them and how can I fix this?

I have noticed that when I have text in my inline-block divs they move down instead of staying in place how can I fix this so that is stays in line with the others with text inside?

Screenshot

Screenshot

HTML

<html>
<head>
    <title>My Web site</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="home.css">
</head>
<body>
    <div id="container">
        <div id="jumbotron">

        </div>
        <center>
            <div class="listbox">
                <h1>exapmle</h1>
            </div>
            <div class="listbox">
            </div>
        <div class="listbox"></div>
        </center>
       <!-- container end div -->
    </div>
</body>
</html>

CSS

#container{
    height:100%;
    width:100%;
    background-color: #669999;
    padding: 5px 5px 5px 5px;
}
.listbox{
    height: 250px;
    width: 250px; 
    background-color: #003333;
    display:inline-block;
    border-radius:5px;
}
#jumbotron{
    margin:2px auto 5px auto;
    background-color:black;
    border-radius:5px;
    height:450px;
    width:900px;
    color:#ffffff;
}
Solution

  • It's happening, because browser is trying match the baseline of all inline elements.

    Add vertical-align: middle to .listbox