Home arrow Style Sheets arrow Creating Three-Column Web Page Layous with Negative Margins

Creating Three-Column Web Page Layous with Negative Margins

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
September 03, 2008
  1. · Creating Three-Column Web Page Layous with Negative Margins
  2. · A first step: a basic two-column web page layout
  3. · Building three-column web page layouts
  4. · Listing the full source code of the three-column web page design

print this article

Creating Three-Column Web Page Layous with Negative Margins
(Page 1 of 4 )


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!

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