1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Guillotine Bug

Problem

If a container element contains both a float that is not cleared, and links that use an a:hover rule to change certain properties in non-floated content after the float, hovering over said links will cause the bottom of the floated content to disappear.

Solution

No perfect solution, but two options: [1] Use a clearing div outside the container when the float should not be contained; and [2] use a combination of :after and the Holly hack to create a clearing element within the container when the float should be contained.

Detailed description

If a container element contains both a float that is not cleared and links that use an a:hover rule to change certain properties* in non-floated content after the float, hovering over said links will cause the bottom of the floated content to disappear.

When a container has dimensions set, IE automatically encloses all floats inside the container. In these cases, the container will stretch down to contain a float that is larger than the height of non-floated content.

*background, padding, text style, and border are all triggers; text color is NOT.

Bug originally reported by Prabhath Sirisena on positioniseverything.net. (Original Article)

Text ID: GUILLOTINE_BUG

---