11

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.

user3059686
  • 423
  • 2
  • 5
  • 10
  • Can you try to replicate the issue in a jsfiddle? – essmahr Dec 05 '13 at 22:19
  • 1
    `display: inline-block` causes white-space to show up in the browser if there is space between the elements in your code. If you look at the related topics to this question, you'll find your answer. – brouxhaha Dec 05 '13 at 22:22
  • Why not just use floats? And for pictures, just use imgur and post a link. – David Dec 05 '13 at 22:31
  • check this out: http://stackoverflow.com/questions/10269290/how-to-arrange-many-div-elements-side-by-side-with-no-wrap – Reza Owliaei Dec 05 '13 at 22:37

3 Answers3

17

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/

MattDiamant
  • 8,561
  • 4
  • 37
  • 46
  • Neat. Do you know how to make the second inline block take the remainder of the space ? – Ced Aug 23 '15 at 20:50
4

A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.

It's less code then your route will be and it's more structurally sound. :D.

.topThumbnail,
.topInfo {
    float:left;
}
.topInfo {
    clear:both;
}
Mike Barwick
  • 6,288
  • 6
  • 51
  • 76
  • 1
    I've always been really confused by floats. I can never seem to get the elements where I want. – user3059686 Dec 05 '13 at 22:45
  • 1
    Well, you should probably learn them if you're looking to learn how to code. Especially if it involves DIV structure and layout. :) Here's some info on the `float` property: https://developer.mozilla.org/en-US/docs/Web/CSS/float – Mike Barwick Dec 05 '13 at 22:47
  • 2
    There are many ways to achieve aligning `divs` horizontally, and `display: inline-block` and `float: left` are both different ways of doing it, each with their pros and cons, and are both equally valid. – MattDiamant Dec 05 '13 at 22:52
1

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

McKay Whiting
  • 152
  • 11