3 Column Layout problem with IE

[NXArmada]

Im working on a new design for the company I work for, I have a demo up of the problem I am having.

In Firefox everything shows up fine but when you try it out in IE the left navigation menus goes off of the screen to the left. I have been using A List Apart 3 column layout as a reference.

heres a link to the demo page: http://rfsquared.com/beta/

As you can see it works perfectly in Firefox but as i said not in IE 5, 6, or 7

[mwinter]

In Firefox everything shows up fine but when you try it out in IE the left navigation menus goes off of the screen to the left.

Your combination of floats, relative positioning, and negative margins, all on the same element, probably has IE confused.

Remember to backup your current work before proceeding!

There are two directions to consider: floats (again) or absolute positioning. If you choose the former, you'll need to alter the markup, moving the left and right columns before the centre one. You'll only be floating those outer columns, so they need to occur first in order to appear at the right vertical position. If you choose absolute positioning, the markup can stay as it is.

Whichever you choose, start by removing the "#container .column" rule (and the class attributes in the markup, if you wish). Next, change the padding-left and -right properties in the "#container" rule to margin-, and apply those two declarations to the "#center" rule. You can remove the width declaration in the latter, and also in "#warning". Finally, remove all except the width declarations from the "#left" and "#right" rules.

You should now have:



#warning {
height: 35px;
/* ... */
}

#container {
padding-top: 13px;
}

#center {
margin-left: 128px; /* LC width */
margin-right: 152px; /* RC width */
}

#left {
width: 128px; /* LC width */
}

#right {
width: 152px; /* RC width */
}

Now the paths diverge:

To use floating, float "#left" left, and "#right" right. That's it.
To use absolute positioning:



#container {
/* ... */
position: relative;
}

#left {
position: absolute;
left: 0;
width: 128px; /* LC width */
}

#right {
position: absolute;
right: 0;
width: 152px; /* RC width */
}

That should be all you need (checked briefly in Fx and IE6).

Mike

[NXArmada]

Thanks mike for the help The Float method worked in Firefox but not in IE and the absolute positioning method did not work in ether firefox or IE.

Demos:
Original: http://rfsquared.com/beta/index.html
absolute: http://rfsquared.com/beta/abso.html
float: http://rfsquared.com/beta/float.html

I may have missed something but i am not sure.

I would prefer to use absolute.

[mwinter]

The Float method worked in Firefox but not in IE

You didn't remove the width declaration in the "#warning" rule (which you need to do for both solutions).



and the absolute positioning method did not work in ether firefox or IE.

I forgot to mention to add a top property declaration to the "#left" and "#right" rules. As you use padding to add space between the navigation menu and content, you'll need to use that value (13px). Your "IE Fix" rule at the top of style sheet will also interfere; remove it.

Mike

[NXArmada]

#warning you mean wrapper as u did above.

[NXArmada]

well i added the top: 13px; to the absolute method and i left Wrapper Warning and IE Fix the way i had it and it works now in IE.

As you can see in this updated demo:
http://rfsquared.com/beta/abso.html

thanks again mike

[mwinter]

#warning you mean wrapper as u did above.

No, I meant "#warning". I'm used to writing "#wrapper": I'd have used a class, not id, for warning. If you look at the two rules, only "#warning" has a height declaration with the value 35px, as I included in my previous post.

The explicit width in the "#warning" rule causes IE to expand the width of the #center column. The right-hand edge of the #right column doesn't line up with that of the navigation menu.



well i added the top: 13px; to the absolute method and i left Wrapper Warning and IE Fix the way i had it and it works now in IE.

As you can see in this updated demo:
http://rfsquared.com/beta/abso.html

It looks broken, here. Specifically, the #left column sits over the content. That is caused by the "IE Fix" rule as it has a higher specificity than the "#left" rule.

Mike

[NXArmada]

Ah I am using IE 7 and its showing up fine I will check IE 6 later and fix the problem as you suggested.

Thanks for the help.