Question

I have this data:

<div id="results">
  <span id="row">
    <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

I’m trying to emulate this:

Here is my CSS Code:

#results {
  width: 700px;
  margin: 0px auto;
  border: 1px solid black;
}

#row {
  width: 85%;
  margin: 0px auto;
  border: 2px solid green;
}

#left {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#middle {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#right {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

<div id="results">
  <span id="row">
        <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

The problem is, that it turns out like this!

It looks fine except to the right of the right span block, that green chunk there is supposed to be the #row wrapper. Why isn’t it wrapping like it should?

Answer 1

Define display:block or display:inline-block to your #row span Because span is an inline element which didn’t take width & height by default.

Check this http://jsfiddle.net/2xufx/