CSS Fixed Width Center Column With Out Tables

How do we keep this site running? This post may contain affiliate links — the cost is the same to you, but we get a referral fee. Compensation does not affect rankings. Thanks!

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.

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>

Alex bring a series of in-depth articles on search marketing and content management systems as well as troubleshooting tips to We Rock Your Web's collection. He is an avid tennis player, nature enthusiast, and hiker, and enjoys spending time with his wife, friends, and dogs, Bella and Lily.

Leave a Reply

18 Comments on "CSS Fixed Width Center Column With Out Tables"

avatar
Anonymous
Anonymous

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.

Anonymous
Anonymous

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

Anonymous
Anonymous

Thanx, it helped me to find out..

Anonymous
Anonymous

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?

We Rock Your Web
We Rock Your Web

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.

Anonymous
Anonymous

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!

Anonymous
Anonymous

This centering technique works really good. Thanks.

Anonymous
Anonymous

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!

Anonymous
Anonymous

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.

alexc
alexc

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

Anonymous
Anonymous

doesn’t work at all in firefox 2.0.0.4

Anonymous
Anonymous

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

Anonymous
Anonymous

It doesn’t work at all

wpDiscuz

Send this to a friend