Pandora wants a new layout, but there’s just one problem, she and CSS aren’t friends. The design she’s after is a basic 2 column layout, which should be a staple in every designer’s CSS pantry.

At first, creating a 2 column layout, especially when the overall design looks intricate can seem like a daunting task, but it helps when you look at the layout in chunks instead of a whole. Discover what the main components will be.

Determine Layout Elements (aka Chunk It)

There are usually 4 visual elements and an invisible one within a basic two column fixed-width layout.

2 Column Layout Chunked

The four visual elements are the header, content, side column, and footer. The invisible element is the container that holds the design together like a cinch.

Once you decide on the main components, move on to defining their ID in the CSS file. As a general rule of thumb, I usually name the IDs based on their purpose.


#wrap {}
#header {}
#content {}
#sidebar{}
#footer {}

Wrap

As its name suggests, the wrap or container or whatever you prefer to call it, is what contains the design elements. Ultimately, it can be used to define the layout’s width and how it sits on the page.


#wrap {margin: 25px; width: 750px;}

The above gives this 2 column layout a fixed width of 750 pixels and 25 pixel margins on the top, bottom, left, and right.

Header

The header is usually where the site’s banner or logo is displayed along with the name, tagline, and basic navigation is located.

Header Layout

If you’re going to use a banner image as the backdrop, you will need to add a height to your header ID.


#header {height: 150px;}

Content

The content column is generally where you put the meat of your website. Articles, blog entries, images, and various other important elements.

Content Column

Usually, the design will call for the content column to line up on one side of the page and the other side is reserved for the side column. Though there are a number of ways to accomplish this, I prefer to use floats.

Since I want the content on the left, I’ll use a left float. Also, I will define a width so the content column doesn’t spill over onto the side column.


#content {float: left; width: 500px;}

Side Column

The side column is usually where you put miscellaneous content, adverts, and navigation.

Side Column

Since the content column is on the left, naturally the side column will be on the right. Along with floating it to the right, define a width so it doesn’t overlap the content column.


#sidebar {float: right; width: 200px;}

* Adding a right float isn’t necessary, it’s just my personal preference. If you define a width, the side column will automatically sit flush with the content column unless you define a margin.

Footer

A footer isn’t essential, but it’s a nice place to store those links to your dislcaimer and other website fine print.

Footer

Floats are designed to let content wrap around it, so if you don’t want your footer wrapping around anything, you’ll need to clear the left and right floats used for the content and side columns.


#footer {clear: both; height: 1%;}

Now, the footer should sit at the bottom of the layout. The height is added because IE will do something funky if you don’t.

Final Words

The above example is a general frame work to get you started. When you apply it to your own 2 column layout, you will need to adjust the sizes to fit that of your design’s dimensions. Have a peek at the Summer 2006 CSS file and you’ll see that it’s the same frame work used here.

You can download a sample 2 Column CSS and HTML file[1] to play with. Use background images, colors, borders, negative margins, padding and anything else you feel inspired to use. If you’d like your content and side columns to look as though they are the same height, you’ll need to use faux columns or another tweak for the desired effect.

The idea is for you to get creative and don’t be afraid to play until you have what you’re looking for.

[1] – The sample CSS file uses padding and adjusts width/height elements to compensate. You should see the comments in the 2-col.css file. It may be unfortunate, but CSS requires some basic mathematical skills.

Tagged: , , , ,