Visit my current blog
CafePress Store

Buy this on a tshirt, mug, hat or more!

Buy this on a tshirt, mug, hat or more!
I'm currently working on a site that has a fairly standard 3-column layout, which looks like this:

Or, at least, it looked like that in Firefox. In Internet Explorer it looked like this:

Argh! Horror! It seemed that nothing could be done. I spent hours fiddling with css, thinking it was a problem with the element itself, throwing "position:absolute" and "width:80%" around like they were going out of fashion. Some of the things I tried are definitely out of fashion... <td> anyone?
Eventually, after a very long time, I suddenly had a brainwave. THIS was what was happening:

Essentially, when the image that was in the sidebar was put into the block, I set the width to 100%, which Firefox, Chrome, etc deciphered as meaning 100% of the element within which it was contained. IE, however, saw this as the image being 100% sized, and whilst it displayed it as the width of the element, it created a sort of invisible overflow which knocked the other elements out. Using images that are resized to the exact dimensions they are displayed at (good practice) solves the problem.