CSS problems with floating, one style sheet, same id's

I am currently working 开发者_开发技巧on a project in which the navigation bar is floated to the left and then the content is on the right of that, also floated so it is flush up against the navigation content. I currently have the first page fine and floats perfectly, but when I try to float the next page's content, it jumps down and will not float at all. Both are in separate div's and on separate html documents and both have same float attributes. I do not understand why if both have the same exact code and have enough room for floating, why can't the second page's content do the same?? I am and must use one stylesheet for all pages.

CSS for body

body {
        width: 980px;
    margin-left: 8%;
    margin-right: 8%;
    margin-top:2%;  
    padding: 0;
    font-family: "gill sans", sans-serif;
    font-size: .8 em;
    background-color: #CCC;
}

CSS for navigation

#containernav {
float: left;
padding: 0;
width: 120px;}

CSS for page 1 and 2

#content_main, #content_main2 {
padding:0;
margin:0;
width:750px;
float:left;
background-color:#A30000; }

My guess would be the content inside the floated div on page 2 is larger then 750px, thus causing its parent to stretch, and the div to be pushed down.