Negative margin layouts – browser issues

by Peter

A few days ago, while working with the web site of a client who uses a two column negative margins layout for his site, I noticed the layout breaking apart in a most spectacular manner when I made the screen so narrow that the right sidebar “collided” with a large image in the main column. Since I was working to make the website responsive, it make me think, as most negative margin layouts I have worked with are very stable.

More testing revealed that while there are several methods available for building two column flexible negative margin designs with equal high columns (that is, with one flexible and one fixed width column), the methods result in layouts with very different properties. The one I was working with was quite temperamental and would easily break apart, while others were far more stable.

So I sat around and fiddled with Dreamweaver, using different methods to create such layouts, thinking I would perhaps publish something on different ways of creating equal height negative margin layouts and on how different even were though they might look alike. While doing this, I created the following design (viewed in Firefox 18.0.1 in OS X):

I liked this one. The CSS is very to the point. Like some similar negative margin layouts, it creates an illusion of equal height columns by drawing the background of the sidebar partly as a column background, partly as a border of the main column. So if the sidebar is the tallest, the whole background is from the sidebar, while if the main column is taller, the bottom part of the background for the sidebar is actually the main column border.

Be that as it may. As it turns out, the perhaps most interesting thing about this layout is actually how it displays in all other browsers, which is not nearly as nice:

As you can see, my bluff has been called! Or? A browser bug? This is how the layout looks in IE10 (Win 7) and the latest versions of Opera (version 12.12), Safari (6.0.2 in OS X, 5.1.7 Win 7) and Chrome (version 24.0) both in Windows and in OS X (Mountain Lion). Quite interesting, isn’t it? I guess you thought browser bugs were a thing of the past – so not 2013 – and yet here they are (and, as it turns out, they are still abundant, we just don’t write so much about them any more).

Here is the basic CSS for the two columns negative margin layout:

#content { background:blue; border-right:200px solid red;
float:left; text-align:left; width:100%; }
#sidebar { background:gray; float:right; margin-left:-200px;
width:200px; }

I will post more on equal height negative margin layouts. Meanwhile, enjoy this. If you encounter any other odd browser bugs, pass them on to me!

You can see the full code in the source for the demo (make sure you look at it both with Firefox and at least one other major browser). Have fun.

Related Posts:

Leave a Comment