One tradeoff you can make to fix the footer

To try this solution, just give the footer the same right margin size as the main content area, like this:

#footer {
        background-color: #675c47;
        color:            #efe5d0;
        text-align:       center;
        padding:          15px;
        margin:           10px 330px 10px 10px;
        font-size:        90%;
}

If you save this and reload your page, you’ll see that the footer is now under the main content area only, and never creeps up under the sidebar. Is this optimal? No, but it’s also not bad. And, as we’ve said, doing CSS layout is a bit of an art. To do layout, you need to experiment, explore, and keep an eye on the layouts others are creating with CSS (you’ll find some references for good CSS hangouts at the end of the chapter).