May
25
2006
CSS Fixed Width Center Column
Categories:
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.
that is great
It doesn't work at all
great indeed
Why don't you explain where you're having problems so we can help you.
fixed with centre colum without tables
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
Sub-menu tutorial
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.
firefox 2 completely broken
doesn't work at all in firefox 2.0.0.4
Works okay in tests
Works okay in our tests - can you elaborate what doesn't work/ paste your code snippet so we can debug for you?
Can you help me?
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
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
Great solution
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!
height: 100% ;?
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.
CSS fixed width center column
This centering technique works really good. Thanks.
Great simple fix!
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!