div alignment and issues with float

Question

I'm recreating the AACC website (page here) and have run into some issues with trying to align the columns in the middle, titled "National Initiative", "Leading Advancement", and "Awards Program". In my source code, which is viewable with the css here, I created it so that the banner with the clinton picture floats to the left of the login area and the side bar. However regarless if I use clear:both, the first column (which is viewable at the bottom of my page), stays underneath the sidebar on the right. I'm not entirely sure how to fix this, maybe I'm just putting the clear property in the wrong place in the code or whatever the problem may be. Just could use a fresh set of eyes on this.

Here's the CSS code where I think the problem could be corrected:

#banner {float: left; width: 730px;}

#logbar {
background-color: rgb(95, 193, 47); color:#FFFFFF; padding: 3px; margin-left: 740px; width: 240px; height: 130px;}

#sidebar{margin-left: 740px; width: 240px; height: 700px; padding:1px; background-color: #66CC66; margin-top: 3px;}

#col1{float:left; width:236; height;300px; background-color:rgb(204, 227, 251);}

Answer 1

The only way I can see that being possible with your HTML structure is absolutely positioning the element.

#col1 {
  top: 420px;           /* Add this */
  position: absolute;   /* And this */
  width: 236px;
  background-color: rgb(204, 227, 251);
}

However this is really just a hack. You should restructure your HTML. AACC is not a good example - they use tables for their layout. Look at how stackoverflow create their sidebar for a better example.