页面右列在左列下推？

Question

I recently launched my new website and everything has been great, but all the sudden the right column has pushed itself under the left column and to the left. I don;t know what has caused this as nothing was changed and all the css/html looks the same compared to my other index files (I have a flat html index file that has no php in it for when I am building page layouts)

Here is my website: http://www.survivaloperations.net/

As you can see the right column has pushed its self down and to the left http://puu.sh/840fQ.jpg

I have been looking for almost an hour now trying to figure out the cause of this, and how to fix it (all the column widths are as they should be and match with my working index.html template file).

Any ideas/comments/suggestions are welcome and much appreciated!

Answer 1

When I decrease #left_col's width the right col pops up next to it.

update: when I remove the overflow: auto from the .content_wrap div element the menu seems to return to it's proper place.

update two:

I added a a div with the class clearfix that has the css style of clear:both after the floated columns and your footer returns to the bottom of the page:

<div class="content_wrap">
  <div id=left_col></div>
  <div id="right_col"></div>
  <div class="clearfix"></div>
</div>

when floating elements the parent element gets collapsed, thus why your footer was pushed up. Adding a clear:both is the general way to fix the collapsing div.