Table-cell with width in %

Question

I've got three different table-cell divs which have different widths: 30% , 40% and 30% .

My outer div is 100% , but my inner divs doesn't displayed as they should be. If I am using px it works fine (Example: outer div: 300px , inner: 100px each).

So how can I make it work with width also? Here is my code

#container { width:100%; background:#ccc; }
#left { background:red; width:30%; display:table-cell; }
#center { background:green; width:40%; display:table-cell;  }
#right { background:red; width:30%; display:table-cell;  }

<div id="container">
    <div id="left">asdasdas  </div>
    <div id="center">as das da <p> asdas </p> </div>
    <div id="left"> asd as das</div>
</div>

Answer 1

If you require them to cover full width then set the display property of #container to table .

#container { width:100%; background:#ccc; display:table; }

Demo .

If you do not require them to cover full width but the container to be as big as the inner divs then set it to table-row

#container { width:100%; background:#ccc; display:table-row; }

Demo .