Compatibility issues with IE7?

Answer 1

Start with adding a float:left to .landingTopInfo:

.landingTopInfo{ 
    float: left;
    padding-top:10px;
    text-align:left;
    width:50%;
    padding-left:15px;}

That'll get you in the ballpark.

For the .landingBottomInfo area, I'd foat the image and text items (.landingBottomInfoSectionText) left and set the left padding to fit.

Answer 2

I think it has to do with your use of percentage-based widths on a floated element.

IIRC, IE7 rounds percentage-to-pixel calculations differently, which could result in the combined width being > 100%.

Answer 3

remove the align center(aka align left on the landingMainContainter) and then floating the .landingTopInfo left.

landingMainContainer

{ padding-left:10px; margin: 0 auto; text-align: left; min-height: 400px; width: 960px; }

.landingTopInfo { padding-top:10px; text-align:left; width:50%; padding-left:15px; float:left; }

Answer 4

Give landingTopInfo a padding-top: 10px;

Give landingTopInfoText a float: left; and change its padding-top to 10px

Give your "monitor," "compare," and "view" images each a float: left;