Question

Here (and below) you can see an issue with a “middle” div that won’t wrap its content. I’m trying to get it to automatically wrap the entire content of the table, so there’s a neat white 10 pixel padded border all the way round. I’ve tried everything I can think of, playing with display modes, floats, clears, overflows… But nothing seems to work. Can anyone see where I’m going wrong?

#outer {
    height : 200px;
    width : 200px;
    background : red;
    overflow : auto;
    padding : 10px;
}
#middle {
    background : white;
    padding : 10px;
}
#inner {
    border : 1px solid purple;
}
td {
    background : cyan;
    padding : 5px;
    border : 1px solid blue;
}

<div id="outer">
  <div id="middle">
    <table id="inner">
      <tr>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

Add

display:inline-block;

to the #middle definition.

What is the difference between display: inline and display: inline-block? provides some more details about the inline-block property value.

See this updated fiddle.