How to Make Div Elements Display Inline

How do you make div elements display inline?

That's something else then:

div.inline { float:left; }.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div><div class="inline">1<br />2<br />3</div><div class="inline">1<br />2<br />3</div><br class="clearBoth" /><!-- you may or may not need this -->

How do I display div inline?

Use this CSS on your wrapper div

.container{
    overflow: auto;
    white-space:nowrap;
}

& take out float and use inline-block instead.

 div{
       display: inline-block;  
    }

CODEPEN DEMO

Now you have an inline horizontal scroll!

how to make div elements display inline (other version)

Please note that CSS class names are case-sensitive, .word {...} will not work for <div class="Word">...</div>

Anyway, your words are wrapped in 3 block level elements, you'd have to make them all inline to get your desired effect

div.Word > div.tekst > p

.Word, .Word .tekst, .Word p {
  display:inline;
}

jsFiddle

body,html {  margin-left: 10%;  margin-right: 10%;  padding: 0px;  height: 100%;  font-family: georgia, "Comic Sans MS";  background-color: #f0f0f0;}
.container {  width: 100%;  height: 90%;}
.Word, .Word .tekst, .Word p {  display:inline;}

<div class="container">
  <div class="Word" id="word1">    <div class="tekst" id="tekst1">      <p>Cat</p>    </div>  </div>  <div class="Word" id="word2">    <div class="tekst" id="tekst2">      <p>spoon</p>    </div>  </div>  <div class="Word" id="word3">    <div class="tekst" id="tekst3">      <p>meal</p>    </div>  </div>  <div class="Word" id="word4">    <div class="tekst" id="tekst4">      <p>passport</p>    </div>  </div>  <div class="Word" id="word5">    <div class="tekst" id="tekst5">      <p>egg</p>    </div>  </div>  <div class="Word" id="word6">    <div class="tekst" id="tekst6">      <p>beak</p>    </div>  </div>  <div class="Word" id="word7">    <div class="tekst" id="tekst7">      <p>tea</p>    </div>  </div>  <div class="Word" id="word8">    <div class="tekst" id="tekst8">      <p>milk</p>    </div>  </div>
</div>

How to make div elements display inline

http://jsfiddle.net/qZN5v/

change display:inline to float:left

 #content-box1, #content-box2, #content-box3, #content-box4, #content-box5 {
 position:relative;
 height:120px;
 color:#a8d540;
 font-family: 'Raleway', sans-serif;
 font-size:20pt;
 background-color:#a8d540;
 border:none;
 text-align:center;
 float:left;
 margin-top:10px;
 margin-bottom:10px;

}

How to put divs in a row with display: inline-block, without a margin?

It is because of the new line between the elements. You could comment it like I did, or make those elements inline with each other

.div {  position: relative;  display: inline-block;  background: black;  width: 100px;  height: 100px;  margin: 0 !important;}

<div class="div"></div><!----><div class="div"></div><!----><div class="div"></div>

div element and display inline-block

It's due to the linebreaks between the DIVs (in the HTML code). If you remove those, it works:

* {  margin: 0;  padding: 0;  border: 0px solid red;}
body {  background-color: #888;}
.container1 {  background-color: #aaa;}
.main {  width: 60%;  background-color: green;  display: inline-block;  box-sizing: border-box;}
.side {  box-sizing: border-box;  width: 20%;  display: inline-block;  background-color: white;}

<div class="container1">  <div class="side">s</div><div class="main">    abcdef  </div><div class="side">s</div></div>

Putting div elements inline

You have 3 options, to choose for the display property of an element in CSS:

Inline elements:

respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.

Block elements:

respect all of those
force a line break after the block element

Inline-block elements:

allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width

So, it's better to put display:inline-block for elements with these classes:

dot
timeline-inner

like this:

timeline dot, timeline timeline-inner{
    display: inline-block;
}

Please dont forget to put enough time to provide a summarized, though useful version of your code, including Markup and CSS, to let people reproduce final results.

How to get two divs inline beside eachother?

I get your point but please do add your working codes to be more clear in your question.

You can actually do this:

HTML

<div class="header">
  <div class="pic">
    <img src="http://placehold.it/150x150" alt="Sample Image">
    <img src="http://placehold.it/150x150" alt="Sample Image">
  </div>
  <div class="vid">
    <img src="http://placehold.it/400x150" alt="Sample Image">
  </div>
</div>

CSS:

.header {
  display: inline-block; 
  width: 100%;
  border: 1px solid #ccc;
}
.vid {
  float: right;
}
.pic {
  float: left;
}

Working fiddle

Using display:inline-block but my DIV is still appearing on a new line

When there is a lot of text, you have to limit the width of inline-block elements by applying width settings to them which allow both elements to fit into one line, for example width: 50% and width: 45%
Otherwise they will by default expand according to the text, which will result in 100% width when there's enough text to fill a full line.