Where does the overflow go?

by Joe Gillespie — Aug 1, 2004

There is only one thing you can be sure of about text on a Web page, the amount of room that it takes up cannot be be predicted! A different computer, another browser, some other user – they will all have their own ideas what the type font and size should be. The fact that you have specified something in particular is a suggestion, not a dictate.

So, if you put text into an area of fixed size but the type size has changed from your specification, and expectation, what's going to happen?

I don't know. You don't know.

The best thing that could happen is that the area expands (or contracts) to enclose the new text area. If it is a table cell, that is going to have a knock-on effect for other cells in the same row or column. If you are using a CSS box, there are many things that can happen – most of them aren't good either.

If you specify a width for a relatively positioned text box in CSS but leave the height unspecified, the box will stretch downwards and it will push all divs below it down to accommodate.

If you specify a height or use absolute positioning for your div, then you could be into an 'overflow' situation. Exactly how browsers handle overflow is a hit and miss affair. CSS2 specifies how they should handle overflow but few browsers get it right.

Here's what's supposed to happen with overflow.

overflow: visible

All the text will be visible but any text outside the specified box size will be outside the box. If you have a border or background color, they will remain at the specified size and the text will simply 'overprint' it.

overflow visible

overflow: hidden

The overflowing text will not be rendered, which could well cut right through a line of text. The text is 'clipped' by the notional div box area and brings another property into the equation – 'clip'. Clip is so inconsistently implemented across browsers it is best to avoid it altogether at the minute.

overflow hidden

overflow: scroll

The overflowing text is not visible and scroll bars become activated. How they look is very much browser dependant. It would be nice if only a vertical scroll bar appeared, but you're more likely to get a horizontal one as:

overflow scroll

overflow: auto

This option would, at first, seem to make sense except that CSS2 requires that it introduces scroll bars again. What you actually get in different browsers is anybody's guess.

Well, the outcome of all this is that it is best avoid overflow situations if you can possibly help it. If you use relative positioning and don't try to lock down specific widths and heights – heights especially – things will usually work just fine.

If you try to produce a static, non-flexible layout and don't leave a white space 'buffer zone' for the overflow, your layout is going to break!

Don't go with the flow!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float