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 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.
A:
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
done
2010-01-26 22:50:55
+1
A:
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Dieter G
2010-01-26 22:51:38
This fixed it! Thanks! I didn't realize the ajaxloader was getting set as too large for the area and pushing that div down.
Bradley Herman
2010-01-27 14:14:34
As a tip for the future, use the IE developer toolbar to check how padding, margins and element widths affect the layout. You can normally track issues like this down very quickly.
Dieter G
2010-01-27 21:23:29
A:
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;
}
Jonathan Lonowski
2010-01-26 22:58:22
A:
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.
Code Monkey
2010-01-26 23:33:41
-1 If you looked at the css you would've seen that Eric Meyer's css reset is being used and that the divs in question have set widths.
Phaze Phusion
2010-01-26 23:55:47
A:
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.
Phaze Phusion
2010-01-26 23:49:34