How can I display two div in one line via css inline property

Question

I try to use css inline property to make div node display in one line, below is my code

<html>
 <head>
  <style type="text/css">
   .inline { 
    display: inline; 
    border: 1px solid red; 
    margin:10px;
    }
  </style>
 </head>
 <body>
  <div>
   <div class='inline'><div>I'm here</div></div>
   <div class='inline'><div>I'm follow</div></div>
  </div>
 </body>
</html>

The result is not right, the two div with class 'inline' still display in two line, and the border is display incorrect too. I don't know what happen, who can help me?

thanks

in this case you can probably fix it by just removing the extra
in each line, demo: https://codepen.io/lznt/pen/PowmLgX — lznt, Dec 23 '19 at 22:55
If there is not enough space, inline-block will not work, in that case use white-space: nowrap. — Stepan Yakovenko, Mar 17 '20 at 19:38

score 32 · Answer 1 · edited May 23 '17 at 12:09

32

use inline-block instead of inline. Read more information here about the difference between inline and inline-block.

.inline { 
display: inline-block; 
border: 1px solid red; 
margin:10px;
}

DEMO

edited May 23 '17 at 12:09

Community

1
1

answered Jul 30 '14 at 12:40

Suresh Ponnukalai

13,820
5
34
54

thanks for your answer, but there is too many space between two div with inline-block – user2155362 Jul 30 '14 at 12:45
4

that because of you have given margin. Remove margin it will come next to each. – Suresh Ponnukalai Jul 30 '14 at 12:46
2

This solution has one annoying issue: since `div`s are made `inline` you have to keep no spaces, new lines etc between them in your HTML. Otherwise, browsers will render a space between them. See this [**Fiddle**](https://jsfiddle.net/AlexandrAbakumov/1n2a05ob/): you can't manage to keep both `div`s on the same line unless you put theirs tags without anything in between. – Alexander Abakumov May 31 '16 at 16:33
It's working well in laptop but not in small screens like iphones – nourza Feb 27 '21 at 22:15
This solution doesn't work when content inside an inline div overflows (e.g. big tests) – tecdoc ukr net May 19 '23 at 08:27

Alex Char · Answer 2 · 2014-07-30T14:03:38.980

6

You don't need to use display:inline to achieve this:

.inline { 
    border: 1px solid red;
    margin:10px;
    float:left;/*Add float left*/
    margin :10px;
}

You can use float-left.

Using float:left is best way to place multiple div elements in one line. Why? Because inline-block does have some problem when is viewed in IE older versions.

fiddle

edited Jul 30 '14 at 14:03

answered Jul 30 '14 at 12:42

Alex Char

32,879
9
49
70

Probably i'm wrong about IE9. Only IE8 and newer have full support for display: inline-block. IE7 and older apply it to elements that are inline by default (like span) and not to any other elements (like li or div). – Alex Char Jul 30 '14 at 14:02
IE6 and IE7 (if someone still cares about these) only need a [simple CSS hack](http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block/6545033#6545033) and you're fine. Floating brings along a nice set of hard-to-understand problems that make it necessary to dive into clearing techniques and other strange stuff (for a beginner, at least). And that's in every browser. – kapa Jul 30 '14 at 14:06
@kapa: See my comment under the `inline-block` answer on when the `float` solution might be preferrable than `inline-block` one. – Alexander Abakumov May 31 '16 at 16:36

How can I display two div in one line via css inline property

2 Answers2