Simple HTML/CSS positioning issue

For some reason I think I'm forgetting something here. Below is my code:

<style type="text/css">
#content {
    width: 400px;
    height: 100px;
    background: orange;
    padding: 10px;
}
</style>
<div id="content">
<h1>what</h1>
foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo开发者_运维问答foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo
</div>

When that loads, it shows this:

The text is not inside the box. Why...? And how to fix?

Add the style

word-wrap:break-word;

on your #content

#content {
    width: 400px;
    height: 100px;
    background: orange;
    padding: 10px;
    word-wrap:break-word;
}

I don't think CSS will automatically break words into pieces to fit into the div. You could use overflow:hidden to hide the overflow. The example you already use should work fine if you have words that don't exceed the size of the div.

You can also use word-wrap:break-word but, IIRC, that requires either IE or CSS3 (though that probably represents a lot of browsers out there).