Overlapping floats
As if it was a continuation to a previous post, I came across a problem in Firefox (and in Chrome and Safari) when I developed a 3-column flexible layout with floats and negative margins:
In Firefox, the green (second left) float, because of some negative margin, overlaps the red (first left) float, rendering the link unclickable. Interestingly, this does not seem to be an issue in IE8 and Opera. Setting the z-index did not solve the problem.
A solution is to create a new offset container out of the red float. Simply add position:relative to it:
If you look closely, the borders show that the red float is now in front of the green one, although it comes first in the code (this difference is visible both in Firefox and IE), and the link is now clickable.
<div style="border:1px solid blue; width:100px; height:100px; position:relative;">
<div style="border:1px solid red; width:30px; height:80px; float:left;">
<a href="link">link</a>
</div>
<div style="width:100%; float:left; margin-left:-34px; border:1px solid green;">
<div style="border:1px solid green; margin-left:40px;">text</div>
</div>
</div>
text
In Firefox, the green (second left) float, because of some negative margin, overlaps the red (first left) float, rendering the link unclickable. Interestingly, this does not seem to be an issue in IE8 and Opera. Setting the z-index did not solve the problem.
A solution is to create a new offset container out of the red float. Simply add position:relative to it:
text
If you look closely, the borders show that the red float is now in front of the green one, although it comes first in the code (this difference is visible both in Firefox and IE), and the link is now clickable.