负边距流体布局

Creating Liquid Layouts with Negative Margins

by RYAN BRILL

• Published in: CSS, Layout

• Discuss this article »

   | Share this article »

I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.

Starting out simple

To show how negative margins can be helpful in creating liquid layouts, let’s start by creating a liquid two-column layout with a header and footer. The main content area will be on the left, with the sidebar on the right. This would normally be a very simple process, but we are changing things around a bit because we want our source code to be structured in a certain way.

Given the way that floats work, it would be easiest to put the sidebar before the content area, allowing it to float to the right of the rest of the content. However, since it is preferable to have the page’s content come before the sidebar in text browsers, screen readers, and legacy browsers that will not display our styles, we want to come up with a solution that allows the content to come first in the source — and one that works in a vast majority of browsers.

The source code we want

Let’s take a look at what we want our source code to look like for our two-column layout, with a header and a footer:

<div id="header">header</div>

<div id="container">
  <h1>content</h1>
  <p>Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit.
  Phasellus varius eleifend.</p>
  <p class="last">Donec euismod.
  Praesent mauris mi, adipiscing non,
  mollis eget, adipiscing ac, erat.
  Integer nonummy mauris sit.</p>
</div>

<div id="sidebar">
  <h1>sidebar</h1>
  <ul>
    <li>link one</li>
    <li>link two</li>
  </ul>
</div>

<div id="footer">footer</div>

View Example 1 to see how we want the un-styled content to appear. Once you’ve seen that, it will become more obvious why we want the content to come before the sidebar, as browsers that do not correctly read our CSS will be displaying it in this way.

We know that we need the left content area to take up the entire available width minus the space that the right sidebar requires. So what if we could specify 100% -200px as our width? Using negative margins, we can create just that effect. No, really!

The CSS we’ll need

Let’s take a stab at the CSS we are going to need to pull this off. As promised, we are going to set the width of our container div to 100%, float it left, and give it a negative right margin of -200px. It is very important that we float this element, as margins (and thus, negative margins) are handled differently for floated and inline elements than they are for non-floated block-level elements.

The negative right margin has more to do with allowing the sidebar to float up into this element’s space than it does with any positioning/appearance of the element itself, as can be seen in Example 2 below. We float our sidebar to the right and set its width to the 200px we just created for it. Finally, we give our footer div a clear: both style to ensure that it remains below the rest of our content, regardless of which side is longer. We are also going to give our header and footer background colors to set them apart from the rest of the page.

#header {
  background: #d7dabd;
}
#container {
  width: 100%;
  float: left;
  margin-right: -200px;
}
#sidebar {
  width: 200px;
  float: right;
}
#footer {
  background: #d7dabd;
  clear: both; 
}

That CSS will give us the results in Example 2. As you can see, we now need to push the content area away from the right side of the document. We’ve chosen to use another div to do this, as browser support will be better for this method than there is for some of the alternatives. Thus we change our XHTML to look like this:

<div id="container">
  <div id="content">
    <h1>content</h1>
    <p>Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.
    Phasellus varius eleifend.</p>
    <p class="last">Donec euismod.
    Praesent mauris mi, adipiscing non,
    mollis eget, adipiscing ac, erat.
    Integer nonummy mauris sit.</p>
  </div>
</div>

We now add right margin and a background color to the content div, which should place it just where we need it and separate it from the sidebar.

#content {
  background: #f1f2ea;
  margin-right: 200px;
}

Heading off problems

Jumping a bit ahead of the visual examples, we’re going to fix another problem. We need to set the first element in our content div to have no top margin and the last element to have no bottom margin. In our case, we are simply going to set the margin-top of the h1 element to 0, and set up a class for the last paragraph of our content div, which will set the margin-bottom to 0. Now that we’ve done that,Example 3 is ready to look at.

It’s getting better, but of course you’ll have noticed that the right sidebar does not extend all the way to the bottom. Thanks to the little trick of using images as background, as shown by Dan Cederholm’s “Faux Columns,” we can easily fix this problem.

First, we create the below image. It is 200 pixels wide because the width must correspond to the width of our sidebar.

To pull off Dan’s trick, we add a wrapper div around the container and sidebar divs, and also add a div with clear: both set on it below them. Our XHTML will now look like this:

<div id="wrapper">
  <div id="container">
    <div id="content">
      <h1>content</h1>
      <p>Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit.
      Phasellus varius eleifend.</p>
      <p class="last">Donec euismod.
      Praesent mauris mi, adipiscing non,
      mollis eget, adipiscing ac, erat.
      Integer nonummy mauris sit.</p>
    </div>
  </div>
	
  <div id="sidebar">
    <h1>sidebar</h1>
    <ul>
      <li>link one</li>
      <li>link two</li>
    </ul>
  </div>
  <div class="clearing">&nbsp;</div>
</div>

Now that we’ve done that, we can add the background to this wrapper div. We set the background to repeat-y and to be positioned to the right. To fix a bug in Internet Explorer, we also need to add the same background to our container div.

#wrapper {
  background:
    #f1f2ea url(background.gif) repeat-y right;
}
#container {
  width: 100%;
  background:
    #f1f2ea url(background.gif) repeat-y right;
  float: left;
  margin-right: -200px;
}

W’ll also set up the styles for our clearing div to ensure that the footer will fall below both columns and that they will display correctly:

.clearing {
  height: 0;
  clear: both;
}

That will give us a very nice-looking two-column liquid layout that degrades very well in the absence of CSS. Take a look at Example 4. Simply adding some borders and padding to the elements can give you a fine start to a liquid two-column layout. Of course, if we would have wanted the sidebar on the right, we would simply have to change the floats and margins to their opposites. Where we see float: left, we would change to float: right; where we see margin-right: 200px, we would change to margin-left: 200px, and so on.

Getting trickier: the three-column version

But what if we can take this even further and attempt a three-column layout with a fluid content area? Not only can we do this, we can do it surprisingly easily! We’ll need to make a few final tweaks to our XHTML by adding a few more divs — and then we’ll be ready to write some more CSS.

<div id="outer_wrapper">

  <div id="wrapper">
    <div id="container">
      <div id="content">
      
        <div id="left">
          <h1>navbar</h1>
          <ul>
            <li>link one</li>
            <li>link two</li>
          </ul>
        </div>
        
        <div id="main">
          <h1>content</h1>
          <p>Lorem ipsum dolor sit amet,
          consectetuer adipiscing elit.
          Phasellus varius eleifend.</p>
          <p class="last">Donec euismod.
          Praesent mauris mi, adipiscing non,
          mollis eget, adipiscing ac, erat.
          Integer nonummy mauris sit.</p>
        </div>
        
      </div>
    </div>
		
    <div id="sidebar">
      <h1>sidebar</h1>
      <p>Here be your sidebar.
      Add whatever content you may desire.</p>
    </div>
		
    <div class="clearing">&nbsp;</div>
  </div>
  
</div>

Re-implementing faux columns

Again, since we will want all our columns to have equal heights, we are going to create more faux columns. We’ve created the following two images:

As you can see by the XHTML above, we’ve added another wrapper div in addition to the left sidebar div, and a div around the middle content. Our new wrapper div will contain the background image for our new column, positioned to the left and repeated down to the bottom of the div. Also, we’ve removed the background from the content div and will now add the desired background color to our outer_wrapper div:

#outer_wrapper {
  background: #fff url(background_3.gif) repeat-y left;
}
#wrapper {
  background: url(background_2.gif) repeat-y right;
}

The white background will show through where the image is not being displayed, thus coloring our middle column. We are also going to add the backgrounds to our inner elements to avoid some ugly gaps that are present in most versions of Internet Explorer.

#container {
  width: 100%;
  float: left;
  margin-right: -200px;
  background: url(background_2.gif) repeat-y right;
}
#content {
  margin-right: 200px;
  background: url(background_3.gif) repeat-y left;
}

We then add these simple styles to again use margins to position our left and middle columns where needed.

#main {
  margin-left: 150px;
}
#left {
  width: 150px;
  float: left;
}

Finally, we’ve added the following styles to our header and footer divs to give the layout a more finished look:

border: 1px solid #cecea5;

Take a look at Example 5 and feel free to view the source to see it in its entirety.

Of course, using the @import rule on your final sites would be a good idea to keep your site from getting displayed with its pants down in legacy browsers.

In conclusion

As you can see, negative margins are an under-utilized aspect of CSS that add another layout option for those who want to control the order of elements in the source code and who don’t mind adding a non-semantic wrapper div to do so.