a blog by Christian Snodgrass
about programming, web and game design, and everything else

Columned Layout with Background and Divider without Images

When I was designing this site, I decided I wanted to have a two column layout with a border dividing the two. The tricky part with multi-column layouts is vertical spacing. Since elements only extend as far as they need to vertically, it is often very tricky to get your columns to both go all the way to the bottom. This was my goal:

Imageless Two-Column Layout Goal

Imageless Two-Column Layout Goal

I know there are various techniques for this, like the Faux Column Layout From A List Apart. However, this one was so simple, I really didn’t want to use an image for this.

I then came across a technique for multiple borders using the :after and :before pseudo-classes on an element. This gave me an idea. If I could use this technique to give my main column two borders, the border which the sidebar would sit on and the normal border.

This is how they stack up:

Imageless Two Column Bordered Layout

Imageless Two Column Bordered Layout

Once I thought about it, it was actually pretty easy.

The HTML

The HTML is pretty straight forward. We’ll have a wrapper, a div for our content, and a div for our sidebar. We’re also going to give our wrapper a “clearfix” class to do the clear:after approach.

<div class="wrapper clearfix"> 
  <div class="sidebar"> 
  </div> 
  <div class="content"> 
  </div> 
</div> 

You’ll notice I put the sidebar before the content. You can reverse these if you want, but then you’ll have to apply absolute positioning to the sidebar and set it’s top to 0 and a few other tweaks… but it gets complex quickly. I wanted to keep it simple, so I just switched the HTML a bit. =p

The CSS

First off, to keep things simple, use a CSS reset. My favorite is Eric Meyer’s Reset CSS, but you can use whichever you choose.

To simplify some things, go ahead and figure out the following:

Once you have those, we’re ready to start.

.wrapper

We’re going to get the width of our content based on the width of our wrapper. I’m also going to center my wrapper (with margin: 0 auto), but that is optional. The only other CSS applied to the wrapper is a background. You should set the background of the wrapper to be the same as the background of the content. This way, if the sidebar is longer than the content, the wrapper’s background will show out, giving us the appearance of two equal columns.

The width of your wrapper should be the sum of your content width, sidebar width, and border width. I’m going with a content width of 600px, a sidebar width of 300px, and a border of 5px, so my wrapper will be 905px wide. I’m also going to make my content area have a light gray background (#CCC).

.wrapper { 
    width: 905px; 
    margin: 0 auto; 
    background: #CCC; 

.clearfix

This clearfix is a comment technique to cause your elements to clear the floats it contains without having to add an extra HTML element. This is it:

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 

If you’ve never seen it before, it basically adds some content (a dot) after the element. It then makes that element block and clears both. It then uses height: 0 and visibility: hidden to hide that dot.

.content

Our content area is just a bit more complicated, but not by much. First off, we want to make sure it has position: relative, because the after border is positioned absolute, and we want it absolute relative to content.

Then we want to give it some padding. The vertical padding can be anything without affecting our code. We’re going to let content get it’s width from it’s parent, so we actually don’t have to worry about the horizontal padding for this one either (as long as we’re aware that it reduces our overall width).

We also add our background. This background should be the same as our wrapper.

Next we’ll add our first border. This first border is going to be the larger border that sidebar sites on. We put this one here so it’ll still look decent in browsers that don’t support :before or :after (all we’ll lose is our dividing border). We’re going to set it on just one side, so we’ll use the border-width property to set the width. This border’s width needs to be the width we want the sidebar to be plus the width of the divider border. The reason for this is because we have the second border pushed out a little over the sidebar.

.content { 
    position: relative; 
    background: #CCC; 
    padding: 5px; 
    border: #333 solid; 
    border-width: 0 300px 0 0; 

The large border will make it so if content extends beyond sidebar, it’ll look like sidebar still goes all the way down.

.content:after

Now we get to the little trick, the double border. For this double border, we basically give some content to the content after. We then give it position: absolute. We then set the top and bottom to 0, so the border expands the whole height. Then we’ll set the right to -5px so it’ll go back way from our content area (so it doesn’t accidentally reduce it’s width below what we want).

Finally, we actually set up the border. Once again, since this border is on just one side, we’ll use the border-width property to set it.

.content:after { 
    content: "."; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: -5px; 
    border: solid #FFF; 
    border-width: 0 5px 0 0; 

.sidebar

Almost there. This part is pretty easy. We make our sidebar with it’s padding. We then reduce the width of that padding from the width we’ll set for the sidebar. Then we give it a background that is the same color as the large border we set for .content. We then give it a border on the left side. This should match the color and width of the border we gave to .content:after.

The last part it we’ll give our sidebar position: relative, float it right, and give it a z-index of 1 so it’ll appear over content. I also give it a text color, but that’s purely because of my color choices.

    padding: 5px; 
    float: right; 
    color: #FFF; 
    background: #333; /* Sc */ 
    width: 290px; /* Sw - Sph */ 
    border-width: 0 0 0 5px; 
    z-index: 1; 

Modifications

That wasn’t too hard, was it? I’ve tested this in quite a few browsers without much issue. You can also easily add header and footer to the wrapper without affecting this setup. The only trick would be to make sure your footer clears both.

Here is the completed demo: Two Column Layout with Divider without Images

This technique can also be expanded to support three columns, which I’ll cover in another article.

Another thing you could do would be to give your sidebar an image background and your content a solid background. To do this, just switch the widths around so you essentially treat the content as the sidebar and vice-versa.


Related Articles


Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Back to Top