What I've Learned (1 of 4)

by Michael Clark
February 15, 2012 10:54 AM

I've officially been back at Freed-Hardeman for a little over 6 months and in that time there have been a few things I've learned.

The first tidbit I'd like to share is in regards to creating an equal two-column layout using CSS only. There are many "tricks" to accomplishing this - tables, javascript, etc., but I've finally stumbled across a pure CSS method. It's detailed fully in this article on A List Apart so I'll give a quick summary for the skimmers at home.

This method involves three divs - a container, a main content area, and a rail (think sidebar). The content and rail divs are nested inside the container div (It may seem weird, but the content div needs to come before the rail div regardless of what side the rail is supposed to display). Here are the important pieces of CSS (you can background colors to differentiate your columns if you'd like):

#container{
  background-color:#fff;
  overflow:hidden;
  width:750px;
}
#content{
  background-color:#fff;
  width:600px;
  border-right:150px solid #000;
  margin-right:-150px;
  float:left;
}
#rail{
  background-color:#000;
  width:150px;
  float:left;
}

Let's break this down into what's going on.

We have a 750px wide container with a 600px content area and a 150px side rail. The content area also gets a right border of 150px the same color as the side rail as well as a -150px margin that allows the rail div to move into it's proper place. The right border makes it appear so that as the content area grows, the side bar appears to fill in beside it (when in reality, it's just the right border). In similar fashion, if the side rail is taller than the content area, the container has the same color as the content area and fills in what's missing.

Better yet, the layout can be modified so that your column can be on the right should you so desire. The article from A List Apart also goes into detail on how to create a three-column equal height layout.

Pretty simple, isn't it?


Add comment




biuquote
  • Comment
  • Preview
Loading