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).
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 |