HTML Inline-Block DIVs Not Lining Up

Question

So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:

.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}

.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}

.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}

.topThumbnail img {
width: 370px;
height: 230px;
}

.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}

.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}

The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code. And the HTML code:

<div class="topContainer">
        <div class="topThumbnail">
            <img src="YT.png" />
        </div>
        <div class="topInfo">
            <p>Testing the information area of the top container or something along those lines</p>
        </div>
    </div>

Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.

In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the

margin to 0 to fix the default margin issues.

Answer 1

display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.

Like this:

http://jsfiddle.net/hsdLT/

Answer 2

Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.

See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align. This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected