Two divs inline block, why they are not staying next to each other?

Question

I have created two divs and I would like them to stay next to each other, but one is always going down even if they have display: inline-block. What is wrong? I don't understand.

 .container { width: 200px; border: 1px solid black; } .a { display: inline-block; background: red; } .b { width: 20px; display: inline-block; background: blue; }

 <div class="container"> <div class="a">hello hello hello hello hello hello hello</div> <div class="b">aaa</div> </div>

Answer 1

Problem

Without specifying a width, the width of the inline block is automatically determined by its contents. In your case, the red block contains a long line, which makes it fill (almost) the entire space available. The blue block is wider than the space that is left available by the red block, causing it to wrap to the next line.

NB: Before reading the suggestions I gave in 2015, note that I would probably try to do it using flexbox now, as in this answer by Steve Sanders .

Solution 1: specifying a width for both elements

In the snippet below, both blocks are given a width. You can specify a pixel width, because you know the container size too, but percentages would work as well, provided they add up to a 100%, not more.

Note that I had to modify the HTML a little too to remove the whitespace between them. This is a common pitfall when choosing this solution.

 .container { width: 200px; border: 1px solid black; } .a { display: inline-block; width: 180px; background: red; } .b { display: inline-block; width: 20px; background: blue; }

 <div class="container"> <div class="a">hello hello hello hello hello hello hello </div><div class="b">aaa</div> </div>

Solution 2: display the elements as table cells in a row

Alternatively, you can make them behave like a table row. This has the advantage that their height will match too, and that you can easily give one of them a width and the other not. Also, you won't have the whitespace-between-elements issue that you would need to solve when using the first solution.

 .container { width: 200px; border: 1px solid black; display: table; } .a { display: table-cell; background: red; } .b { width: 20px; display: table-cell; background: blue; }

 <div class="container"> <div class="a">hello hello hello hello hello hello hello </div><div class="b">aaa</div> </div>

Answer 2

The display:inline-block makes both elements remain in the same line if there's enough space for it . Otherwise, the line will break.

There are many solutions that would work here, but lets think simpler...

If you have defined a fixed width for both the container and the "b" div, then why not set a fixed width to the "a" div as well, with the 180px remaining?

 .container { width: 200px; border: 1px solid black; } .a { width: 180px; display: inline-block; background: red; } .b { width: 20px; display: inline-block; background: blue; }

 <div class="container"> <div class="a">hello hello hello hello hello hello hello</div><div class="b">aaa</div> </div>

Answer 3

Your inline-block elements will fill the entire horizontal space if they have enough content, pushing other elements below. One way to fix this would be to use flexbox.

 .container { width: 200px; border: 1px solid black; display: flex; } .a { background: red; } .b { width: 20px; background: blue; }

 <div class="container"> <div class="a">hello hello hello hello hello hello hello</div> <div class="b">aaa</div> </div>

Answer 4

Since the text inside div with class 'a' is big relative to the div size, it is taking the whole containers width, by giving this div a fixed width less than the container width either fixed or by % , the divs will fit next to each other.

EDIT

 .container { width: 200px; border: 1px solid black; } .a { display: inline-block; background: red; width:150px; } .b { width: 20px; display: inline-block; background: blue; vertical-align:top; }

 <div class="container"> <div class="a">hello hello hello hello hello hello hello</div> <div class="b">aaa</div> </div>