Responsive two-column layout using negative margins

Posted in Tutorials

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 …

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 …

And we end up with this …

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.

 

---