Example 2 can only seemed to be fixed by changing the height:100% to height 100px which will fix the problem but makes using percentage heights impossible.

Although I can’t really think of an example where the parents height wouldn’t be known in this scenario and that you could use pixel heights anyway. If the parent has a height then you can always use a pixel height and solve the problem. Therefore the example seems to be unsolvable but a little contrived as there would be a solution using pixel heights in nearly all cases I can think of.

However it is still a nasty bug

Example 3 can be fixed quite easily with extra html and you just need to use an inner element to hold the relative offset.

Nest a span inside example 3 and use this.
e.g.

.example3 span{
position:relative;
zoom:1.0;
right:20px;
border: 1px solid #000;
background: #A5A5A5;
width:100%
}

Of course that would need to be only given to IE6/7 and hidden from others (and the original styles on .example 2 amended to remove the background and borders etc).

Interesting demos though

I know that `right: auto` does nothing, that was to show in the demo that setting it to any value causes the bug in IE6 and 7. Let’s pretend it’s `right: 20px`.

Cheers

I think I already covered these issues in the article and you need height:1px (not 1%) for IE6 and then use min-height:0 for IE7.

The right:auto on position:relative means nothing so should be removed because it is confusing IE.

The css should be like this:

.example1 {
background: #F5F5F5;
padding: 10px 0;
width: 500px;
height: 100px;
margin: 10px auto;
border: 1px solid #000;
}
.example2 {
background: #A5A5A5;
margin-right: -500px;
position: relative;
border: 1px solid #000;
}
.example2 {
display: block;
}
.example3 {
height: auto;
}
* html .example2,* html .example3{height:1px}
.example2,.example3 {min-height:0}

That seems to make both negative margins work as expected.

Hope that helps

Cheers

I’ve set up a demo for both of those setups that break in IE6 here: http://haslayout.net/demos/ie6-unfixable-right-negative-margin-bug-demo.html

If anyone ever finds a solution, let me know.

Cheers

Anyway, what I notice that if `height` is set in percentages (irrelevant of whether the parent has set height or not) then the right negative margin refuses to “work” (i.e. it does not move to the outside of the parent) it does not get fixed by giving the element “layout” using any other method and increasing the value of the margin does not make it go out either. Was just wondering if you know a fix for this problem already.

Cheers

Thanks for your comments.

You obvioulsy skipped over the part where I mention that the height:1% hack does not actually work in this case and it has to be height:1px which “must” only be given to IE6 otherwise everyone else only gets 1px height.

It is also very risky to recommend that authors use height:1% for all because it will cause problems when the parent element has a set height and then the 1% will resolve to 1% and you will get very little content showing.

Although height:1% can be used safely where the parents are height:auto I would advise against it because it’s an accident waiting to happen.

Separating the hack into a specific ie6 only rule means that it is safe forever even when you go back at a later date and add heights to your parents for whatever reason.

Consistency is the key here

I’ve documented the negative margin on http://haslayout.net/css/view?tut=Negative-Margin-Bug if anyone cares.

Cheers!

My question is about using negative margins and floats to create a two column layout.

I understand the motivation for putting the content first and sidebar second (in document order) but if the sidebar *did* come first what would you expect the effect to be?

I had a page where the sidebar did come first and it was working fine on IE6/7, Opera 9.25 and Firefox 2. It doesn’t work with Firefox 3rc1 or Safari (3.0.4 on Windows)

The problem is that mouse clicks in the sidebar are ignored. You can’t click inputs or links or select text. You do have keyboard access to them. Also if the float with negative margin has a background color it covers the sidebar.

Is there some CSS rule that says the float with negative margin must come first?

I asked the question on the Firefox discussion group also. There is an example that shows the issue there.

http://groups.google.com/group/mozilla.dev.apps.firefox/browse_thread/thread/a42bcf6bf689bcf2?hl=en#