Creating Hybrid Web Page Layouts with Negative Margins

Introduction

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!