Creating Three-Column Web Page Layous with Negative Margins
(Page 1 of 4 )
Undoubtedly, one of most interesting aspects of building DIV-based web page layouts is that they can be created by means of different approaches, ranging from floating these containing elements to the left and right sides of a web document via the useful “float” CSS property, to implementing more complex techniques, such as using negative margins to accommodate the DIVs in question. In this third article in a four-part series, you will learn how to create the popular three-column web page layout using negative margins.
Introduction
The use of negative margins to create web page layouts that can be displayed consistently across most modern browsers isn't new; it has been used over the last few years successfully by many web designers. However, there's the possibility that you may want to learn how to put this technique to work for you, or that you need to fill some gaps regarding its usage.
In either case, in these articles, you'll be provided with numerous hands-on examples to teach you how to build a decent variety of web page layouts using CSS negative margins. We started with the construction of different two-column liquid and fixed designs, and we will finish by creating more complex ones, including the classical three-column layout.
Since at this point you're well aware of the main subject of this article series, I'm going to spend a few minutes refreshing the topics that were discussed in the last tutorial. This will establish continuity between the aforementioned article and this one, which hopefully you're reading with interest.
In simple terms, in the preceding installment I showed you how to use the so-called CSS negative margins to build a basic web page layout composed of two primary columns, located obviously to the left and right sides of a given web document respectively.
In this particular case, the purpose in building this rudimentary layout was simply to demonstrate how easy it is to swap the respective positions of the columns in question within a web page, by specifying a negative value for the margin of one of these primary columns.
So far, so good. At this moment I assume that you understand how to create two-column web page layouts by using negative margins, so it's time to continue exploring the helpful capabilities offered by this useful CSS approach for constructing multi-column web documents.
So, in the next few lines I'm going to walk you through the creation of some solid three-column web page layouts by using CSS negative margins. Ready to go through this third chapter of this educational journey? Let's begin now!
Next: A first step: a basic two-column web page layout >>
More Style Sheets Articles
More By Alejandro Gervasio
