Why is the right column not in line with others?

[700lbGorilla]

Trying to do a 3 column float, the left and middle are behaving, but the left is out of line. I've tried fixing it but can't get it. They are inside a main div because the div will be further down the page after I get the float working.

http://tinyurl.com/y64edz (site)
http://tinyurl.com/y5mrwy (css)

[Tyssen]

Floats have to come first so the right column needs to go before the middle in the source.

[700lbGorilla]

Thank you that solved it!! Quick question, can you see why the footer isn't sticking to the bottom? I thought I had this problem before so I tried that fix, to no avail.

[Tyssen]

For info on getting the footer to stick to the bottom: http://css-discuss.incutio.com/?page=FooterInfo

[deathshadow]

Oh, and if you cared about having them in flow order, since they are ALL the same width, you could just float them all left and let them stack - that way 'updated' wouldn't have to come before 'recent'...

[700lbGorilla]

Thanks, got it at the bottom now. Also, thanks for the added info deathshadow I didn't realize you could do that.

[700lbGorilla]

I can't test in IE6, but someone told me that the middle column is out of line and the footer isn't stuck to the bottom because the main container isn't 100% height. Can someone check this and possibly see where it is going wrong? Looks fine in IE7 and FF2

[Tyssen]

For the columns, remove the width from the middle one and give the outer ones display: inline to counter IE's double margin bug.
For the footer and the bottom, you need to move this down before the last closing </div> (there's one too many below it at the moment):

<div id="clearfooter"></div>
<div id="footer"><h3>Content Copyright © 2006 WordLocker.com</h3></div>

Then you need to add this:

* html #container { height:100%; }

which targets IE<=6 only and you should remove the min-height and height from #content (cos it's #container you're trying to make stretch to the bottom) and you don't really need the width on it either.