Sidebars Misaligned in IE8 WordPress

Pippin Williamson answers:

Okay, a couple of things.

First, delete this line:


#sidebar-left, #main-content {
margin-right: 111px;
}

(line 290)

And this one (line 292):


#sidebar-right, #main-content {
margin-left: -95px;
}


Now add this to your css:


#sidebar-right {
float: right;
width: 200px;
}


That should just about do it.

idt answers:

The structure of your HTML is different in IE and Firefox.

In IE8, your main-content and right sidebar divs are outside <div class="container clearfix">. The clearfix class is pushing your main-content and right sidebar which is expected because those two divs are suppose to be inside the container div.

What you need to do now is check for unclosed or unneeded tags in the HTML inside your left-sidebar that may have caused those two divs being outside your container div. A few CSS changes might be needed later on but right now that's the biggest issue you need to fix first.

Buzu B answers:

There is actually a bit more to do than just delete here and add there. The structure of the site is a bit screwed up. Firefox is making sense of your styles, but IE just says "what ever... just trow it the way it is".

Your problems started earlier, before you even realized you had them.

The first thing I notice wrong is that you are giving your main-content container a width a few pixels too small. You declared this:

#main-content {float: left; width: 476px;}

At the beginning of your MAIN LAYOUT INFO area, right after the content part. The problem here is that you are later using images that are about 660px wide.

Another problem you have is that you are using the margins wrong. You don't need to do all that stuff.

This is what I would do:

1) go and change this:

#main-content {float: left; width: 476px;}

for
#main-content {float: left; width: 570px;}

2)Then go to your side bar styles and delete this:


#sidebar-left, #main-content { margin-right: 131px; }

#sidebar-right, #main-content { margin-left: -95px; }

3)Now, add this:

#main-content { margin-left: 190px; }
#sidebar-right { margin-left: 770px; }

That should be enough to see a huge improvement on IE8, but there might still be some tweaking needed to achieve perfection, but it should be a good starting point. If you need someone to take care of all the details, and leave it working flawless on IE as well as on FF, you can hire me for the job. I have deep understanding about floats and their crazy behavior on IE, as well as margins and their collapsing behavior.