StreamSend Email Marketing - 30 Days Free
StreamSend is Email Marketing by Marketers, for Marketers. They offer a very friendly and easy to use interface, private IP address, trigger-based messaging, demographic reporting, integration with Google Analytics, and more. Click here to get 30 free days and give them a try.
Buy One Domain Name, Get One Free
Looking for a reliable and affordable Domain Name Registrar? Look no further than Dotster. And for a limited time, we're able to offer our visitors a buy one domain name, get one free promotion. Click here
to take advantage of this offer.
CSS Fixed Width Center Column
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>
 |
 |
 |
Big Stock Photo : millions of royalty free stock photos and illustrations, starting at $1 per photo. Use promo code HW2333 to obtain free credits when you sign up.
Due to the popularity of our web development contract template, we're offering our attorney approved contract, estimate, NDA and invoice templates for $199.50 $49.50 if you order by March 15. Click here to learn more & download.
StreamSend is Email Marketing by Marketers, for Marketers. Friendly and easy to use interface, private IP address, trigger-based messaging, demographic reporting, integration with Google Analytics, and more. Free 30 day trial.
Need a website or web project completed asap? Fill out our quote for services form.
Learn how to increase your website traffic, and analyze visitor data so you can optimize your sales campaigns. You'll find it all and more on our sister website, Guru of Search.
- Open Paypal button in new window
2 days 9 hours ago - Thank you
2 days 9 hours ago - Letter Me Later
2 days 9 hours ago - Lightning Strike
2 days 9 hours ago - Incredibly inefficient iContact
2 days 20 hours ago
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?
Not quite...
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:
BODY {
font-family: arial;
text-align: center;
margin: 5em 0 0 0;
vertical-align: middle;
}
#content {
width: 760px;
text-align: left;
margin: 0 auto;
}
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
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.
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!
Little confused about the side columns
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
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.