CSS float proprerty issue ( + guidance ) [closed]

Question

I need some help figuring out why my layout is messy. Here is what I was working on :The Site. The green box should be inside the purple box. I think there is a floating issue. Since I don't fully understand the float rules can someone help me identify the problem and suggest some good "old" documentation reading?

Thank you!

Answer 1

Add an overflow: hidden; to the div with id: content-n

#content-n {
    clear: left;
    position: relative;
    width: 980px;
    overflow: hidden; /* add this */
}