Having issues with IE7 and floated elements (of course)

I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought 开发者_JS百科changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.

Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.

Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.

Hope that helped you out.

Cheers

I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.

Instead of float, you might try position with left and right, respectively:

.content.wrapper {
   position: relative; /* establish boundary for absolute positioning */
}

.sidebar.left {
   position: absolute;
   top: 0px;
   left: 0px;
}

.sidebar.right {
   position: absolute;
   top: 0px;
   right: 0px;
}

I propose you add the following:

#ajaxloader {
    width: 737px;
    float: left;
}

The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right

With this addition the IE7 and Firefox versions should look the same, give or take a pixel.

I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.