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

css inline

181,808

Solution 1

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

Solution 2

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

181,808

user2155362

Updated on July 09, 2022

Comments

user2155362 almost 2 years
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
- kapa almost 10 years
  
  What about reading up a bit on what inline does?
- lznt over 4 years
  
  in this case you can probably fix it by just removing the extra <div> in each line, demo: codepen.io/lznt/pen/PowmLgX
- Stepan Yakovenko over 4 years
  
  If there is not enough space, inline-block will not work, in that case use white-space: nowrap.
user2155362 almost 10 years

thanks for your answer, but there is too many space between two div with inline-block
Suresh Ponnukalai almost 10 years

that because of you have given margin. Remove margin it will come next to each.
Alex Char almost 10 years

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).
kapa almost 10 years

IE6 and IE7 (if someone still cares about these) only need a simple CSS hack 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.
Alexander Abakumov about 8 years

This solution has one annoying issue: since divs 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: you can't manage to keep both divs on the same line unless you put theirs tags without anything in between.
Alexander Abakumov about 8 years

@kapa: See my comment under the inline-block answer on when the float solution might be preferrable than inline-block one.
nourza over 3 years

It's working well in laptop but not in small screens like iphones