I just recently started a business website and I edited a .css template to put it together. Everything looks fine in IE but when I look at the site in firefox my third column is starting at the bottom right of the page rather than the bottom top of the page.
and say exactly the same thing, sans the extra DIV. In so doing, the page-size is lighter in size, -less code to have to pour over (reduced DIV-itis).
I could almost go over this with a re-write easier than trying to repair little things like this. I can't quite seem to figure out what everything does, -there's so many "float:left;"s that I'm losing track of what is floating against what... I found two or three DIVs that overlap each other, -they 'float:left', but the overlap keep sending the NEXT thing 'down'..
It is a nice-looking page though. Relatively clean, nice colors.
Internet Explorer misunderstands a lot of CSS. Your pager will look pretty much the same in all other browsers apart from IE. In Opera the google ads on the right are below everything else alongside a huge whitespace. Looks like lots of repositioning of content in the stylesheet to get it to display properly in IE which are probably the cause of it looking like it does in everything else. Most browsers will allow you to flow the page properly without ever having to use negative positioning.
Thanks everyone for your help. I've just about got the page working now. One thing got messed up by changing the:
is my left column headings such as Available Rental Units, Weather, etc. are left-aligned rather than centered. Any idea where I can place a text-align: center to correct this issue without mucking up the rest of the page?