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

Creating Hybrid Web Page Layouts with Negative Margins

In this conclusion to a four-part series on using negative margins for web page layouts, we will take a look at web pages with a hybrid design. By this I mean web pages that use both liquid and fixed widths for their columns. This is a common design that is easy to handle with CSS negative margins; keep reading to learn how to do it.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
September 09, 2008
  1. · Creating Hybrid Web Page Layouts with Negative Margins
  2. · Hybrid layout foundations:
  3. · Creating a hybrid web page layout with CSS negative margins
  4. · Completing a hybrid web page layout

print this article

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


Building web page layouts using a DIV-based approach has become very popular with both beginners and experienced web designers. This technique has proven to be more flexible and better structured than using plain tables. In consequence, as the table-less paradigm continues gaining advocates in the terrain of professional web development, different approaches have emerged, aimed at facilitating the creation of web page layouts by using only a few containing DIVs.

And speaking of DIV-driven approaches, one of the most popular methodologies used over last few years when it comes to constructing the front-end of a given web site, is one that utilizes negative margins to position the main columns of a web document, in this manner creating layouts that will be displayed consistently across most modern browsers.

In this series of articles, made up of four approachable tutorials, youíll find concise and illustrative hands-on examples that will teach you how to use CSS negative margins to build web document layouts that can be used successfully with the most popular browsers available nowadays.

Of course, the smart utilization of CSS negative margins permits you to create with relative ease different types of web page layouts, including those composed of two and three primary columns respectively. This last option was covered in depth in the preceding article. In that tutorial I demonstrated how to use negative margins to create a basic three-column web page layout, which also could be easily modified to suit different needs.

Now that I reviewed the topics discussed in the last article, itís time to talk about what I plan to cover in this final chapter of this series. In the next few lines Iím going to show you how to create a hybrid web page layout, that is, one that uses liquid and fixed widths, via the already familiar CSS negative margin approach.

With the introduction out of the way, letís learn together how to build a neat mixture of both elastic and fixed designs by using the functionality of CSS negative margins. Letís get started!

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials