Mar 26 2009

Last update:

CSS Fixed Width Center Column

Filed under: Markup Languages » CSS,

Fixed width center column without tables

What we want to do here is create a fixed width center column in CSS whose side columns fill in with white space in larger resolutions. This particular example will fit all resolutions down to 800 x 600.

body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; }
#content { width: 760px; text-align: left; margin: 0 auto; }

How it works

In the content div, the left and right margins are set to auto - which means they will automatically expand to the browser's width down to a width of 760px. The 760px is set as our fixed width to prevent horizontal scrollbars on browsers with resolutions down to 800 x 600.

Browser compatibility

The above CSS is compatible in Mozilla 1+, NS 6+, and IE 5+. It displays in NS 4 as well, but does not center as intended.

A complete CSS centering example

Copy and paste all of the content below into a file called example.htm and load it in your browser to see the fixed width centering in action.

<html>
<head>
<style type="text/css">
body { text-align: center; margin: 5em 0 0 0; vertical-align: middle }
#content { width: 760px; text-align: left; margin: 0 auto }
</style>
</head>
<body>
<div id="content">This is some text that will be centered on the page. It is an example that you can try out immediately. Just cut and paste this whole snippet into a file named example.htm and then view it in your browser.</div>
</body>
</html>

View Comments

Thanks for sharing information

Submitted by a web rocker on May 27, 2010 - 5:34am.

Nice article, I was looking for this kind of information on website development. You give a good explanation for using CSS with a fixed width column. I have used this particular example in my web development projects.

Please continue writing....
Regards

gexas

Submitted by a web rocker on March 10, 2010 - 12:12pm.

Thanx, it helped me to find out..

Little confused about the side columns

Submitted by a web rocker on November 4, 2009 - 11:03pm.

Is it just me or are our side columns fake? Like they are just margins that I can't put content in. I want my side columns to have a background (different in each) and my center to have my content. But in this example my side columns don't appear real...

Any help?

Centering example only

Submitted by We Rock Your Web on November 6, 2009 - 10:42am.

This example was simply meant to create a fixed width center column. It does not create separate side columns. I'll post an article shortly that addresses this.

Great simple fix!

Submitted by a web rocker on August 21, 2008 - 10:46am.

I had a site that worked great in Firefox 3 and not so great in any version of IE. Your simple solution fixed it and I was able to trim down my css! Thanks!

CSS fixed width center column

Submitted by a web rocker on July 5, 2008 - 6:53am.

This centering technique works really good. Thanks.

height: 100% ;?

Submitted by a web rocker on April 17, 2008 - 2:43pm.

Thanks for the above code - it works great. And so simple!

How do I get the height of the center column to fill the browser window regardless of resolution?

The code I have so far is:

body { text-align: center; margin: 0em 0 0 0; }
#column { width: 760px; text-align: left; margin: 0 auto; background-color:#333333; font:"Courier New", Courier, monospace; color:#FFFFFF; height: 100%;}
#content { vertical-align: middle; }

with the '#column' div making a colored column and having the intention of placing all my content in the '#content' div which will be vertically centered inside the '#column' div regardless of resolution (it also has the same background color as the '#column' div.

Any help would as I am confused as to why the 'height: 100%' tag does not work as I think it should.

Thanks in advance.

Great solution

Submitted by a web rocker on February 11, 2008 - 8:05am.

This works great! I'm very happy to find there really is a solution to what a lot of people seem to be looking for.

Thanks for sharing it!

Can you help me?

Submitted by a web rocker on December 16, 2007 - 5:42am.

I am trying to make a site, can you explain me where should i put the code (in the head section) so that all the content falls in the center fixed column - for me just the menu (drop down type) is falling in the center.

Centering content

Submitted by We Rock Your Web on December 18, 2007 - 10:48am.

Hi there,

The CSS code can go in the head or in a stylesheet. You'll then want to place the content to be centered in the #content div withing the body:

This content is centered

firefox 2 completely broken

Submitted by a web rocker on June 26, 2007 - 6:23pm.

doesn't work at all in firefox 2.0.0.4

Works okay in tests

Submitted by alex on June 27, 2007 - 2:07am.

Works okay in our tests - can you elaborate what doesn't work/ paste your code snippet so we can debug for you?

Not quite...

Submitted by a web rocker on March 26, 2009 - 10:14am.

The problem is that the code snippet is not complete. It fails to explain to the new developer that you *also* need to create HTML inside a

...

section. A better snippet would be a complete example:

This is some text that will be centered on the page. It is an example that you can try out immediately. Just cut and paste this into a file named example.html and then view example.html in a browser.

Complete example

Submitted by We Rock Your Web on March 26, 2009 - 3:39pm.

You're right, complete examples are always more helpful. Unfortunately your example is not complete and doesn't work. But thanks for bringing it to our attention - we've added a complete example to the article.

Sub-menu tutorial

Submitted by alex on June 7, 2007 - 6:52pm.

Hi there, Glad you found the tutorial useful! I'd be glad to put up a tutorial on the sub-menus at some point. Only thing missing right now is time. I've written myself a note to post it for you - if you don't see it or find one in the next week or so shoot me an email and I'll find one for you. :)

fixed with centre colum without tables

Submitted by a web rocker on June 7, 2007 - 6:09pm.

I am new to building web sites - i found your code sample for a fixed with when i was really struglling to acheive that layout - and it works absouloutely fine no tables just xhtlm and css - thank you so much and as far as i know it works in all browsers - i only wish i could now work out how to do sub navigations on a horizontal navigation bar

that is great

Submitted by a web rocker on March 17, 2007 - 4:17pm.

It doesn't work at all

great indeed

Submitted by alex on March 17, 2007 - 8:58pm.

Why don't you explain where you're having problems so we can help you.