Spacing Issue

Hi, I am in no way an expert in anything to do with coding, but I know enough to get by. I am current trying to make a site with a few friends. My issue is browser compatibility. It looks fine in IE, but in Firefox, Safari, and Chrome it adds a huge space I can't seem to get rid of.
I believe it has something to do with how I added <div> layers. The way it is set up is a header div, main content, and a sidebar on the left (Yes, the dreamweaver template).

Can someone PLEASE show me where I went wrong. I have been trying this for days and am not finding anything.

Thank you.

The website is:
http://www.laserjump.com/beta
If you need me to post the source code here I can.

Hello shadowfox2988,
That is float drop you're seeing and it's caused by your box model being off.

See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all could when figuring width/height.

To explain further:

#container is 900px wide
#mainContent reduces that width by 40px (margin: 0 20px;) leaving you 860px room
#sidebar is 160px wide PLUS 20px padding and 20px margin - total= 200px wide
#example_1_container is 680px wide PLUS 2px of border - total= 682px width given to #mainContent


The total room needed for #sidebar and #mainContent to be side by side is 882px.

Solution may be as simple as increasing width of #container.

Excavator,

Thank you very much. It was very frustrating trying to find that problem. And now that I see it, it seems so obvious. I forgot I added a margin to the sidebar.

You have my sincere thanks.