You may use jsfiddle or similar to test it. As well as firebug
or similar.
About your question:
When you work with floats, you must contain your floats.
In order to do so, you have several techniques at your disposal. Among them, a simple one:
overflow:hidden;
your float container.
In your case, the element with class .main
.
Try this:
.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
background-color: red; //<-- added just to test.
overflow:hidden; //<-- to contain the floats.
}
Hope this helps.