word-wrap не работает должным образом

Question

Я довольно новичок в html & css, и я пытаюсь что-то здесь, но word-wrap Свойство, похоже, не работает здесь, когда я ставлю строку длиннее ширины элемента.

JSFiddle ссылка на длинную текстовую строку. (свойство word-wrap здесь не работает).

JSFiddle ссылка на короткую текстовую строку.

/* Site Colors: 
    #1A446C - blue grey 
    #689DC1 - light blue 
    #D4E6F4 - very light blue 
    #EEE4B9 - light tan 
    #8D0D19 - burgundy 
*/ 

html { height: 100%; width: 100%; } 
body { 
    width: 100%; height: 100%; 
    margin: 0; padding: 0; border: 0; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 13px; line-height: 15px; 
    background: #EEE4B9; 
} 
img { border: none; } 
a { color: #8D0D19; } 
a:hover { color: #1A446C; } 

#header { 
    height: 70px; 
    margin: 0; padding: 0; text-align: left; 
    background: #1A446C; color: #D4E6F4; 
} 
#header h1 { padding: 1em; margin: 0; } 
#main { 
    height: 600px; width: 100%; 
    margin: 0; padding: 0; 
    background: #EEE4B9; 
} 
#footer { 
    clear: both; 
    height: 2em; margin: 0; padding: 1em; 
    text-align: center; 
    background: #1A446C; color: #D4E6F4; 
} 

/* Navigation */ 
#navigation { 
    float: left; 
    width: 150px; height: 100%; 
    margin: 0; padding: 0 2em; 
    color: #D4E6F4; background: #8D0D19; 
} 
#navigation a { color: #D4E6F4; text-decoration: none; } 
#navigation a:hover { color: #FFFFFF; } 
ul.topics { 
    margin: 1em 0; padding-left: 0; list-style: none; 
} 

/* Page Content */ 
#page { 
    float: left; 
    height: 100%; 
    word-wrap: normal; 
    padding-left: 2em; vertical-align: top; 
    background: #EEE4B9; 
} 
#page h2 { color: #8D0D19; margin-top: 1em;} 
#page h3 { color: #8D0D19; } 

Я искал его, и я думаю, что он имеет какое-то отношение к недвижимости с плавающей точкой, но не мог понять, что.

Thank you.

Answer 1

Вам нужно явно задать ширину на #page элемента

#page { 
    width: 600px; 
} 

http://jsfiddle.net/xupVJ/