Posted by on Wednesday, February 24th, 2010 at 11:51 pm.
It is always useful in the website design industry, to go back to basics and brush up on the some of more simpler of understandings. Today I will be look into the methods and techniques for centering websites, including the most common method and possible issues you may have come across, whilst checking your website for cross browser compatibility.
Firstly we’ll take a look at the CSS, and in particular the settings for the margin of our div. When a margin is declared, if you state only one margin value, then that value will be applied to all four sides of the div. If you declare two values, the first value will represent the top and the bottom sides, whilst the second represents the left and the right.
The following statement will render our div to have equal and automatic margins either side. Now secondly, for this to center the page, we must specify a fixed width, which in turn will centre our container
#container {Margin:0 auto; width:900px}
and the html…
The above piece of HTML and CSS will simply centre the div #container and give it a fixed width of 900px, keeping the centre alignment at all times, regardless of browser windows size. If only all website design was so easy!
Possible Internet Explorer Issues
Sometimes the “margin:0 auto” will not work when using the Internet Explorer, even though all versions of IE from 5.5 onwards do support it. The common telltale sign of this, is that the div will retain its width, but sit to the left. This could be down to several reasons, but you could try using a supported Doc Type or put text-align:centre; on your body tag.
Channel