How do you make div elements display inline?

Question

Given this HTML:

<div>foo</div><div>bar</div><div>baz</div>

How do you make them display inline like this:

foo bar baz

not like this:

foo
bar
baz

Answer 1

I know people say this is a terrible idea, but it can in practice be useful if you want to do something like tile images with comments underneath them. e.g. Picasaweb uses it to display the thumbnails in an album.
See for example/demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html ( class goog-inline-block ; I abbreviate it to ib here )

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

Given that CSS, set your div to class ib, and now it's magically an inline block element.

Answer 2

Try writing it like this:

<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>

Answer 3

Having read this question and the answers a couple of times, all I can do is assume that there's been quite a bit of editing going on, and my suspicion is that you've been given the incorrect answer based on not providing enough information. My clue comes from the use of br tag.

Apologies to Darryl. I read class="inline" as style="display: inline". You have the right answer, even if you do use semantically questionable class names ;-)

The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking.

If you're wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline.

Floated divs:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

Inline divs:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

If you're after the former, then this is your solution and lose those br tags:

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

note that the width of these divs is fluid, so feel free to put widths on them if you want to control the behavior.

Thanks, Steve

Answer 4

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 -->

Answer 5

You should use <span> instead of <div> for correct way of inline. because div is a block level element, and your requirement is for inline-block level elements.

Here is html code as per your requirements :

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

You've two way to do this

---

• using simple display:inline-block;
• or using float:left;

so you've to change display property display:inline-block; forcefully

Example one

div {
    display: inline-block;
}

Example two

div {
    float: left;
}

you need to clear float

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

Answer 6

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/