Click here to view the issue with the "middle" div not wrapping its content. I have been attempting to make it automatically wrap the entire content of the table, resulting in a neat white 10 pixel padded border surrounding it. Despite trying various methods such as adjusting display modes, floats, clears, and overflows, I have not been successful. Can someone pinpoint where I might be making a mistake?
#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>