Responsive two-column layout using negative margins

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

This tutorial continues directly from the last tutorial, which you should read first.   There we saw a responsive two-column layout with 20px padding in the columns which looks like this …

two columns without negative margins

two columns without negative margins

This looks fine and will work in most cases.  Yes, there is separation between the two columns.  But note that the text is not flushed to the left edge of the page, nor flushed to the right edge of the page.

In cases, where you want the left column to start at the left edge of the page.  And the right-column to go all the way up to the right edge of the page, we can simply add negative margins to the row div as in …

add negative margin css

add negative margin css

And we end up with this …

two columns with negative margins

two columns with negative margins

See the full code and demo here.

It is important to note that the width of the gray area in both cases is the same.  The page width did not change.  Only the columns positioning as indicated by the red outline changed.

This similar technique is used by bootstrap 3’s grid layout.