Right hand column being pushed below other content in IE - HELP!!

Permalink
The right hand column on my latest site is being pushed below other content on the page but only in IE. It works perfectly on Safari/Firefox.

The width of the content doesn't exceed the width of the editable area and it still pushes the site out of shape.

Heres an example of the site:http://www.peditank.co.uk/dev

Can anybody help?

Thanks!

mhandpartners
 
JohntheFish replied on at Permalink Reply
JohntheFish
Some versions of IE add up margins/padding/borders differently to other browsers. There are web sites giving more info on this, but cant remember where to find them off hand.

If you have used C5's block design, then maybe you can reduce margin/padding/border on some of the columns. I don't have any other ideas on how to implement such on top of C5 layouts. You may need to create a 3-column page type within your theme and not use layouts.

Hopefully one of the C5 theme experts can provide more details.
Mainio replied on at Permalink Reply
Mainio
Yes, this is exactly what you should do.

Generally using the c5 layouts tool for building your layout is a bad idea. That is only meant for situations where you e.g. need to have fast two images side by side. Designing your site completely with the layout tool is not the use-case it was designed for (I believe).

IE is very bad with percentage widths. Although the columns add to 99.99%, as John said, IE magically takes some margin/padding of its own so that actually it fills up to more than 100%, thus dropping the last column on bottom.

Quick fix for that would be to override the third column layout for IE as !important style in your stylesheet but a better solution would be to write up a 3-column page type for that page as John already suggested.

C5 made editing so easy, it's even easier to make bad decisions with the tools it offers.