Div Extending Beyond Footer

i have been working on this layout for quite a while. this is the first time I am working with CSS and HTML. anyway. the problem is that the inner text inside this layout is extending beyond the borders of the "master" div container.

I am attaching all my files in a zip. Please Help me. Otherwise my boss won't let me get on to Javascript. CSS and HTML is really boring.

Thanks in Advance.

File: http://www.mediafire.com/file/9qxrvkmp6hescce/Layout.zip

P.S. No JavaScript Please

I'm not sure if you want to hide the overflowing content or allow the user to scroll through it within div container.

Specify the overflow property for the div.theAllEncompassingDiv element to either hidden or scroll, respectively.

.theAllEncompassingDiv { overflow: hidden; }

or

.theAllEncompassingDiv { overflow: scroll; }

Read more on the overflow property here: http://www.w3schools.com/css/pr_pos_overflow.asp

Not that I'm too keen on doing your job for you, but the reason is that you've specified a max-height of 408 pixels in your .theAllEncompassingDiv{} CSS class.

If you remove that, the <div> will become all encompassing once more!

Edit: Spelling