Home arrow Style Sheets arrow Creating Web Page Layouts with Negative Margins

Creating Web Page Layouts with Negative Margins

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
August 19, 2008
  1. · Creating Web Page Layouts with Negative Margins
  2. · Building a quick and dirty two-column web page layout
  3. · Using negative margins to position the main DIVs of a web document
  4. · Defining an additional wrapping DIV

print this article

Creating Web Page Layouts with Negative Margins
(Page 1 of 4 )


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!

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