Table content overflowing enclosing div

A block level element like this div is sized to fit the width of its parent, not the width of its content.
At the top level of a document the parent is typically the viewport (a viewport is the visible portion of the canvas).

If you have a table with content that can’t be broken up because it doesn’t have spaces or there are lots of columns then the width may be greater than the viewport – especially if you are using a laptop or mobile browser.

In this instance the content will break out of the enclosing div.

stuff@longstring stuff@longstring stuff@longstring stuff@longstring stuff@longstring breakout

To resolve this,
use style display:table
Works with IE 8 onwards and tells the div to display as a table.

stuff@longstring stuff@longstring stuff@longstring stuff@longstring stuff@longstring enclosed

use style float:left
Works with IE6 onwards
When an element is floated it uses the value of defined width or auto in which case it shrinks to fit its content.
There’s a definition of shrink-to-fit by the W3C http://www.w3.org/TR/css3-box/#shrink-to-fit

stuff@longstring stuff@longstring stuff@longstring stuff@longstring stuff@longstring enclosed

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA - answer the question below to prove you are human *