Stuck on horizontally scrolling div

Hi everyone, first time posting here. I've gotten stuck writing the html/css on my new site. I want the middle section of the site to scroll horizontally (which it is) but for some reason it is placing my divs oddly as they go from left to right.

I'm not sure if floats are messing things up or something else. I've tried using other containers (ul, div, table) but to no avail.

I want all the photo blocks (tables) to align at the top so that it is just one row across (2 small photos or 1 large photo high).

HTML:
http://www.beautyisdesigned.com/newWebsite/collection2.html

CSS:
http://www.beautyisdesigned.com/newWebsite/css/styles2.css

Thanks for any help!!

Sometimes the solution is just to simplify things:

http://www.beautyisdesigned.com/newWebsite/collection3.html


Still don't understand why those divs wouldn't line up here:
http://www.beautyisdesigned.com/newWebsite/collection2.html


I guess it will remain a mystery.