How to handle different length of language in web page?

Question

I found that some web page layout works perfect for English turns to be messy if another language is applied. The root cause is that some words in some language is too long and pushes other div's away from their best position.

For example,

   <div style="width:40em; overflow: hidden">
        <div id="div1" style="float: left">Bla Bla Bla</div>
        <div id="div2" style="float: left">Something</div>
   </div>

If the "Bla Bla Bla" in div1 is translated to some language longer than 40em, then div2 is pushed out of sight.

Is there any best practices to layout web content so that they can work perfect for any locales?

Answer 1

Add more whitespace.

If you're having problems with text overflowing the alloted space, then maybe you need to make sure you allot more space. Most designs can benefit from giving their content a little more breathing room.

http://www.alistapart.com/articles/whitespace

The other consideration is to try and make wrapping harmless. So if your overflowing text is pushing other stuff out of place then maybe you should rethink the design so that wrapping can't hurt anything.

Answer 2

Here are some rules of thumb for how much whitespace to allow. This is the additional growth rate of translated strings based on the length of the inital English text.

SO won't let me do a proper table so here's my ASCII version :)

    Original       Additional 
    English        growth for
    (characters)   international
    1 to 4         100% 
    5 to 10        80% 
    11 to 20       60% 
    21 to 30       40% 
    31 to 50       20% 
    Over 50        10% 

Far Eastern languages (Chinese, Japanese, Korean) will also typically need a larger font.

Dare I tell you where this comes from? The VB6 programmer's guide :)