CSS - Padding on Display table overflow its container
css, css-tables, padding
Solution
Alternatively, you could try altering the box-sizing property, either for every element on the page, or just that one container. E.g. for each element on the page, you would write:
* { box-sizing: border-box; }
This will alter the default box model that the browser uses so that width of the element is not changed, padding or not.
Problem
Example: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php Why is that the table div is going out from its container whenever I add padding? Is there any work around for this problem? ``` <style> .foroContainer { width: 700px; margin-left: auto; margin-right: auto; background: yellow; } .foroContainer .table{ display: table; width: 100%; padding: 8px; border: 1px solid #a9a9a9; margin-bottom: 1em; } .foroContainer .row{ display: table-row; } .foroContainer .cell{ display: table-cell; } #right.cell{ text-align: right; border-top: 1px solid #a9a9a9; } } </style> <div class="foroContainer"> <div class="table"> <div class="row"> <div class="cell">asdasdasdas</div> </div> <div class="row"> <div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div> </div> </div> ```