Making a DIV Dynamically Adjust to the Size of the Content and Not Fill the Entire Parent

I had created an HTML table with three cells (td). The first cell was 20% of the whole the second 60% and the third 20%. In the second cell I place a div. I needed the div to not fill the entire cell, but stretch or shrink based on how much content is in it. The following code is what I started with. The div would fill the cell, even if empty.

table>
 tr>
 td style="width: 20%">

/td>
td style="width: 60%;text-align:center;">
    div id="divMiddleCell">

            Dynamic Content

       /div>

/td>
/tr>
/table>

I altered it as follows to add display: inline-block tot he style property of the div and it made the div dynamically shrink and grow.


table>
tr>
 td style="width: 20%">

 /td>
 td style="width: 60%;text-align:center;display: inline-block">
    div id="divMiddleCell" ">

       Dynamic Content

       /div>

/td>
/tr>
/table>