Two-Column Hybrid CSS Layout

There are four types of CSS layouts, fixed-width, fluid, elastic and hybrid.
We’re going to tackle a hybrid layout, which is a combination of the other three and in our case, a combination of fixed-width and fluid.

Before we start, if you’d like to take a peek at the end-result, click here!
Some of you will understand the technique just by looking at the code, but those who don’t understand the logic behind this layout, then don’t jump to copy/pasting! Let’s go through the code line by line first and see what each one does and overall, what makes this technique tick.

Our layout is going to have a header, a menu, two columns and a footer, a pretty simple structure but a great starting point! What makes our layout hybrid is the left column which will have a fixed-width and the rest of the layout will be fluid and stretch along with the screen’s resolution.

To get started, we’re going to create the HTML structure using DIVs, obviously :)

Looks awful without the CSS haha, but that’s what we’re going to work on.
We’ll start with some basic styling and the main DIV “#layout”, the one that wraps the rest of the structure:

I’ll give each section a different background color so you can distinguish the spacing.
The main DIV is now entirely fluid, we’ve given it a minimum width of 750px so it will fit well into 800×600 resolutions and a max-width of 1600px and I personally believe we don’t need more than that these days, unless you read this article 10-20 years from now and 100 inches monitors are used on a daily basis, if that’s the case, just tweak the max-width accordingly. Though keep in mind that excessive wide layouts will make text difficult to read, since the text lines will be too long to follow.

Now our layout is ready for internal structuring, let’s style the header:

That easy to add the header, giving it a fixed height we want and the width 100% so it will stretch within our fluid main DIV.
Time to style a fixed-width left column and a fluid right column, both sitting in a “.content” div:

I think most of the code above is self-explanatory, we created a div to hold both of our columns, we floated our left column to the left inevitably stacking our right column in it, so we gave it a left margin of 170px so they won’t overlap.

To put the footer back on track, we added a div with a clear style so it won’t be affected by the above floated elements.

There you have it, a stable hybrid css layout with a fixed-width left column.

Finished code

CSS

HTML

Bear in mind that older browsers like IE6 do not recognize the max-width CSS style so it will stretch to the screen’s resolution width regardless of its size.

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

2 thoughts on “Two-Column Hybrid CSS Layout

  1. Pingback: Facebook Fans Buy
  2. Pingback: Devingredients

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">