Why is this HTML not straightforward?

http://codejanitor.us/nightclub2/

Why are my hello's not:

1. expanding the div con开发者_如何学编程taining them
2. staying inside the div?

Follow instructions

Change your markup to this

<div id="header">
    <div style="float: left;">
        hello<br>
        hello<br>
        hello<br>
        hello<br>
    </div>
    <!-- add clear:both-->
    <div style="clear: both;">
    </div>
</div>

Change your css:

#header {
    background-image: url("images/header.gif");
    background-repeat: repeat-y;
    width: 873px; /* remove width */
    padding: 0px 50px; /* add padding to header */
}

You aren't containing them, see http://work.arounds.org/issue/3/clearing-floats/

Throw overflow hidden on the #header, basically. And all you'd need to do after is add left margin because they are rightfully adjusted to the top left.