Horizontally Center Your Website Structure Using CSS
Every good web programmers knows that you can’t code a commercial website for a specific browsers or user experience level, much less a screen resolution. You can’t tell the client to use certain browser because it means you haven’t done not even 50% of your job.
I prefer creating my websites using a fixed width so that I can have complete control over the website layout. A fixed width website looks the same in all browsers which can prevent users with extremely large or small resolutions from experiencing layout issues. Instead of simply allowing the website to align completely left on the screen (resulting in high-resolution users seeing your website take up only half their screen), I center the site. This is a very simple task and looks fine to have your page centered.
First have your XHTML code:
Declare a DOCTYPE. Create an initial “wrap” DIV that will be the website’s wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>My Title</title> </head> <body><DIV id="wrap"> <!-- WEBSITE GOES HERE --> </DIV> </body> </html>
Have the CSS code:
Declare the “wrap” id — you must declare a width. Use left and right margins of “auto.”
#wrap { width:900px; margin:0 auto; } /* "auto" makes the left and right margins center the wrapper */
And that’s all! Admit that centering your website is easy. Enjoy 
Post a comment
RSS/XML