Swapping Column Positions in Web Page Layouts with Negative Margins
(Page 1 of 4 )
In this second part of a four-part series on using negative margins to create DIV-based web page layouts, we're going to expand on what we learned in the first article by actually switching the positions of the columns of our sample web page. Keep reading to learn how.
Introduction
As you possibly know, building DIV-based web page layouts has become the goal of many web designers who wish to adhere to the standards dictated by the W3 Consortium. Naturally, this has empowered the development of different approaches aimed at building web sites with the table-less paradigm in mind.
Of course, it’s quite probable that you’ve already used some DIVs to create web page layouts that are displayed consistently across distinct browsers, by floating the boxes to the left and the right of a web document. However, one of the best things about designing web sites using only DIVs is that they can be utilized in many clever ways, meaning that it’s possible to construct both fixed and liquid designs with relative ease.
Among the variety of approaches that can be used to build DIV-based web page layouts, there’s one in particular that deserves a closer look, because of its easy learning curve. I’m talking about using negative CSS margins to position the main containers of a given web document, certainly a technique that has gained numerous advocates over time.
Therefore, if you wish to learn the full details of how to put this handy approach to work for you, then this article series might be what you’re looking for. In it, you’ll find numerous and instructive hands-on examples aimed at providing you with the right pointers to start building DIV-based web page layouts by means of CSS negative margins.
Now that I introduced you to the main subject of this series, let me refresh briefly the topics that were discussed in the first article. In that particular installment, I showed you how to create a basic two-column web page layout by specifying a negative value for the right margin of the main column, in this way pulling it away from the side bar. Does this example ring any bells? I bet it does!
However, the web page layout is only an introductory example of what you can do using negative margins. Actually, it’s quite simple to extend this approach to build web document layouts where the positions of the respective columns are inverted. In this second part of the series I’ll be teaching you how to achieve this with minor hassles.
So, are you ready to continue this educational journey and learn how to use negative margins to create consistent web page layouts? Let’s get started now!
Next: Review: using negative margins to build a two-column liquid design >>
More Style Sheets Articles
More By Alejandro Gervasio
