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

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