I've been struggling with this for mega hours and can't find the problem. I have a 2 column layout set up in CSS using float left on both columns. It looks ok until you need to resize the browser window and then the 2nd column wraps below the first one. I have the same 2 column set up on other sites and they don't have a wrapping problem and I can't find the error. Here is the site in question: http://www.books4educ.com/test.html I have the two columns set up inside a container 760 pixels wide. There are two columns, 125 and 590 pixels wide, each are set to float:left. There is also padding on the 2nd column of 10 pixels each side. Column Totals: 590 + 125 + 10 + 10 = only equals 735 so there are 25 pixels left over and still the 2nd column wraps under the first if window screen is moved to the left of container (I've made the content column as little as 560 wide and it still wraps). Here is the css file: http://www.books4educ.com/aab4educ.css If anyone can see my error I would appreciate it.
Fixed. You needed to put your side/main content in a div and work on that. <div style="float: left; width: 760px;"> <div id="sidebar"></div> <div id="content"></div> <br class="clearboth"/> </div> I applied those styles you see, plus changed existing styles to: #sidebar {aab4educ.css (line 80) background-image:url(images/frontsidebarbg.jpg); background-repeat:no-repeat; float:left; width:125px; } /* this may be the same, i am just getting this all from firebug */ #content { float:left; padding-left:10px; padding-right:10px; width:615px; } The main one is that i added the extra div and worked on that. Not tried it across browsers, just ff3/firebug rgds Add