Creating Web Page Layouts with Negative Margins
(Page 1 of 4 )
If you regularly use floating DIVs to help your web pages look consistent in a variety of browsers, you'll be very interested in this technique. Instead of using positive margins, it involves using negative margins to help position your DIVs. This article is the first part of a four-part series.
Introduction
When web designers started building web page layouts using now-venerable DIVs, a considerable number of approaches emerged quickly. These different techniques demonstrated the numerous advantages of the table-less paradigm.
Among many crucial things, you've no doubt learned that DIVs could be easily floated to the left and the right of a web document. This facilitates the creation of consistent web page layouts by mean of only a few floating boxes. And to be frank, this technique has proven to be quite successful, particularly in those cases when it's necessary to build web-based front-ends that must be displayed consistently across different browsers.
In most cases, when floating DIVs are used to build the layout of a web document, they're simply positioned to the left or right side of the pertinent document, according to the number of containing columns that need to be created. Eventually, positive margins are also specified for each of them when this is applicable.
However, as you probably know, it's also possible to build robust web page layouts that use negative margins to accommodate the containing DIVs within the corresponding web document. This CSS-driven approach was introduced initially by Ryan Brill in his insightful article, and it bases its functionality on pulling out DIVs to the left and the right of a web page by specifying negative values for their respective margins.
Even though this concept may sound quite easy to understand, the truth is that it can be a bit tricky when it's time to put it into practice. Therefore, assuming that you're interested in expanding your existing background in building DIV-based web page layouts and learning how to use negative margins to position your DIVs, in this group of articles, I'm going to show you numerous code samples regarding the implementation of this useful CSS technique.
Now, let's get rid of the preliminaries and start learning the key concepts of creating consistent web page layouts using negative margins. Let's get going!
Next: Building a quick and dirty two-column web page layout >>
More Style Sheets Articles
More By Alejandro Gervasio
