Home arrow Style Sheets arrow Swapping Column Positions in Web Page Layouts with Negative Margins

Swapping Column Positions in Web Page Layouts with Negative Margins

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
August 26, 2008
  1. · Swapping Column Positions in Web Page Layouts with Negative Margins
  2. · Review: using negative margins to build a two-column liquid design
  3. · Swapping the position of web page columns
  4. · The complete source code for the previous two-column liquid design

print this article

Swapping Column Positions in Web Page Layouts with Negative Margins
(Page 1 of 4 )


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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials