This is a demonstration of how overflow is handled differently in tables and CSS. Overflow occurs when a word or URL is longer than the available width of it's containing box (when this width is specified). I've used a very long URL.
This is a 2 x 2 table. The cell containing the URL has a width of 300px (set via CSS). However, because the address is much longer the containing <td> will expand, pushing the right column table cells off-screen instead of breaking out of the <td> and overlapping. It's also interesting to note that although this table is in a div to provide the dark gray background, this div isn't expanding with the table outside the viewport (at least not in Safari). The div has width: auto |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Quisque quis nunc et risus iaculis vulputate. |
The left div is positioned absolutely with a width of 300px, and the right div has a large left margin. They are inside a containing div. No body width is set, so the first example will probably expand past the right edge of the viewport, and cause the page to have a horizontal scrollbar.
This div is set to have overflow: visible. This means that if a line of text is too long it will 'stick out' of it's containing box, possibly overlapping other content, or maybe not (see Observations below). This can be caused by a pre tag, or because there are no word breaks (spaces) in a URL or some other very long word.
This is the default behaviour, and the bane of any site with generated content (eg user comments)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque quis nunc et risus iaculis vulputate. Sed quis velit ac magna dignissim nonummy. Morbi ultricies dictum dui. Ut et lorem sed sapien semper molestie. Sed quam. Etiam sodales ante eget tellus. Pellentesque ornare, ante et suscipit euismod, ipsum tortor interdum ante, vel ultrices enim turpis eu sapien. Aenean adipiscing suscipit quam. Vestibulum vestibulum, turpis eget ultrices aliquam, eros metus luctus magna, a luctus enim velit quis leo. Vivamus vestibulum. Sed consectetuer, sem et aliquet semper, odio justo volutpat urna, at cursus tellus ligula at odio. Integer commodo, diam a euismod varius, diam dui fringilla enim, at laoreet nunc libero in wisi. Sed risus dui, fermentum et, iaculis eget, egestas sit amet, nulla. Vivamus luctus nisl ut purus. Phasellus malesuada, dolor eget tempus suscipit, enim purus ullamcorper odio, a porttitor dui eros vitae arcu. Fusce ac nunc.
This div is set to have overflow: scroll. This forces the div to always display widget areas for scroll bars, although they will be inactive unless the content extends beyond the div's width(/height, although we haven't specified one). This should mean an active horizontal bar and a greyed out vertical one.
While ugly, the text is at least accessable now.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque quis nunc et risus iaculis vulputate. Sed quis velit ac magna dignissim nonummy. Morbi ultricies dictum dui. Ut et lorem sed sapien semper molestie. Sed quam. Etiam sodales ante eget tellus. Pellentesque ornare, ante et suscipit euismod, ipsum tortor interdum ante, vel ultrices enim turpis eu sapien. Aenean adipiscing suscipit quam. Vestibulum vestibulum, turpis eget ultrices aliquam, eros metus luctus magna, a luctus enim velit quis leo. Vivamus vestibulum. Sed consectetuer, sem et aliquet semper, odio justo volutpat urna, at cursus tellus ligula at odio. Integer commodo, diam a euismod varius, diam dui fringilla enim, at laoreet nunc libero in wisi. Sed risus dui, fermentum et, iaculis eget, egestas sit amet, nulla. Vivamus luctus nisl ut purus. Phasellus malesuada, dolor eget tempus suscipit, enim purus ullamcorper odio, a porttitor dui eros vitae arcu. Fusce ac nunc.
This div is set to have overflow: auto. This is similar to overflow: scroll, but in this case scroll bars are only visible if content is actually larger than the containing div. This also has the advantage of usually only displaying the needed scrollbar, in this case the horizontal one.
If the containing box is taller than the screen, the user won't see the scroll box, and this will appear the same as overflow: hidden. For content that may often overflow this is the best that CSS can do, ugly though it is.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque quis nunc et risus iaculis vulputate. Sed quis velit ac magna dignissim nonummy. Morbi ultricies dictum dui. Ut et lorem sed sapien semper molestie. Sed quam. Etiam sodales ante eget tellus. Pellentesque ornare, ante et suscipit euismod, ipsum tortor interdum ante, vel ultrices enim turpis eu sapien. Aenean adipiscing suscipit quam. Vestibulum vestibulum, turpis eget ultrices aliquam, eros metus luctus magna, a luctus enim velit quis leo. Vivamus vestibulum. Sed consectetuer, sem et aliquet semper, odio justo volutpat urna, at cursus tellus ligula at odio. Integer commodo, diam a euismod varius, diam dui fringilla enim, at laoreet nunc libero in wisi. Sed risus dui, fermentum et, iaculis eget, egestas sit amet, nulla. Vivamus luctus nisl ut purus. Phasellus malesuada, dolor eget tempus suscipit, enim purus ullamcorper odio, a porttitor dui eros vitae arcu. Fusce ac nunc.
I think it's a great pity that the spec is so vague about something so important. It would have been much better to have made the default Visible always 'break out' of the containing box, and to have added an extra attribute ("Expand"?) that always made the containing box larger to fit if necessary (shrink-wrapping). Please let me know if you see any unusual results in other browsers via a comment