I recently redid my website, and got rid of the old, css-heavy, div-heavy 3-column layout in favor of a nice, simple, 2-column fluid. Not wanting to be bothered with which column was longest, or any of that nonsense, I just absolutely positioned both columns respective to the sides of the screen, and left nice margins for everything to fit. Then I set that pesky footer to be fixed (and tiny) at the bottom of the screen, so it would alway be visible. Everything went great, and there was almost no fiddling, and it looked fine in all the browsers I checked it in.
Then I got stupid. For my background image, I'm using a Gimped-up copy of a pic I took while on vacation this summer. It's basically just a tree line with a gradient sky, BUT (here comes the stupidity) I decided it would be really cool if I repeated the image at the bottom, flipped over, with a wave effect added, to make it look like a reflection of the top image.
To make this work, I wrapped the two columns with a wrapper (to use to hold the bottom background image) and float the columns and clear the footers, and all that. I've done this a hundred times, but THIS time, the goofy right column won't go next to the left one, and I can't figure out why. I need another set of eyes (or maybe many sets) to figure out what's going on.
The page in question is here
The CSS is here
If anyone can figure out what I've done wrong to push the right column down, OR if there's a better way to do a second background image, I'm all ears. Or maybe eyes.