How do you make <div>s 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

Can you please provide more detail on your problem??

Answer 2

(Just edited question, sorry forgot to add spaces at the end of the line)

Answer 3

Try writing it like this:

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

Answer 4

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

Answer 5

Hm..

<div style="display: inline">1<br />2<br />3</div>
<div style="display: inline">1<br />2<br />3</div>
<div style="display: inline">1<br />2<br />3</div>

doesn't work. :(

Answer 6

That's something else then:

<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
<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 7

Excellent. :) Thanks, it works.

Answer 8

<span> ?

Answer 9

An inline div is a freak of the web & should be beaten until it becomes a span (at least 9 times out of 10)...

<span>foo</span>
<span>bar</span>
<span>baz</span>

...answers the original question...

Answer 10

As mentioned, display:inline is probably what you want. Some browsers also support inline-blocks.

http://www.quirksmode.org/css/display.html#inlineblock

Answer 11

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 12

Okay, but what if you want to place these elements inside of a fixed width div? I'm attempting this, but the content wraps to a new line :/

Answer 13

I just tend to make them fixed widths so that they add up to the total width of the page - probably only works if you are using a fixed width page. Also "float".

Answer 14

this is why people use tables, because nobody has a compatible answer to this question