Guillotine Bug in IE 6
February 3rd, 2007 . by brian.corralesIt’s a pretty well-known fact among web developers that formatting never comes easy when the majority of the population uses Internet Explorer. Luckily, in the newly released IE 7, the Guillotine Bug has been fixed. From what I’ve seen, many of the IE bugs have been fixed in the new release. The problem is that most people are still using IE 6.
I just deployed a new online system and it went pretty smooth. I received a few emails about a few minor bugs, but overall the project went quite well. One of these bugs, was the Guillotine Bug. This bug chops off the bottom part of a floating div with links on it. Here’s an example of the source code that would produce this bug:
< div class="container" >
< div class="floater" style="float: left" >This floating div will have the bottom section cut off.< /div>
This is the main section that contains a link. The link should involve some javascript or ajax.
< /div>
Below is a graphical representation of how this set of code should appear:

On the initial page load, the page will look like the IE example and to the normal page viewer, the site appears to be working correctly. After clicking the link on the right column however, the layout is changed to the Guillotine example and most of the left column is cut off.
The answer is quite simple. After closing the container div, add the following:
< div style="clear: both" >< /div >
This gave me a ton of headaches, but luckily, I was given the following link: http://www.positioniseverything.net/explorer/guillotine.html. I’ve referenced this site to write this post and if you are interested in learning all the ins and outs of the Guillotine Bug, I suggest you take a look.