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

You need to contain the three divs. Here is an example:

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

Note: border-radius attributes are optional and only work in CSS3 compliant browsers.

HTML

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

Note that the divs 'foo' 'bar' and 'baz' are each held within the 'contain' div.