HTML Inline-Block DIVs Not Lining Up

Question

So, I'm designing a website right now (pretty nooby in HTML and CSS), but I did the design in Photoshop beforehand so that I could go through the coding and make the site the way I wanted. Well, I have a problem. I have two DIV elements inside a larger DIV container that will not align side by side despite using the built-in 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 containing my topContent and topThumbnail, so I thought I would throw it in 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> 

It is impossible to post photos to explain the problem .. you need 10 reputations .. it will be difficult to describe.

In design, the two containers for Thumbnail and Info should be side by side and aligned at the top. The thumbnail should be to the left of the topContainer, and the information should be to the right of the thumbnail with a margin of 10. For some reason, the information does not go to the right of the thumbnail, but rather goes under it. I have ALREADY given a field value

set to 0 to fix default tagging issues.

Answer 1

display: inline-block works correctly in your example. What you need to add is vertical-align: top to your .topInfo div and get rid of the default margin in the .topInfo p tag. In addition, you need to make sure that .topInfo enough space for the .topInfo div to sit away from the .topThumbnail div , otherwise it will be .topThumbnail to the next line.

Like this:

http://jsfiddle.net/hsdLT/

Answer 2

Pure solution: I would look at the CSS display:inline-block dimensions on these elements completely and simply float on the left. Then clear the floats by assigning clear:both to the .topInfo css property.

This is less code than your route will, and it will look more constructive ..: D

 .topThumbnail, .topInfo { float:left; } .topInfo { clear:both; }