Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Centring a Design with CSS
Centring your design. This is the one single topic which I have seen more posts on forums about than anything else. Why? I think folks see the inevitable blank space in two ways, depending on where it is. The space evenly distributed around the design i.e. centred on the screen and it somehow 'adds to the design'. Most sites are now centred (I notice the good old BBC has moved recently from a left aligned site to a centred one). However, a left aligned site leaves all of the space on the right hand side of the screen and then it is viewed as wasted. Particularly clients of web designers feel that they are paying for space which has not been filled...irrational, I know, but it happens. I see a lot of different methods for centring designs with CSS. Some I have tried and have worked for a while only to be thwarted by something refusing to line up later and others haven't worked at all. Here's the method I used for this site.
Here is the CSS;
#wrapper {margin: auto; width: 800px; position: relative;}
And this is the html;
<head>
<body>
<div id="wrapper">The entire contents of your web page goes here</div>
When I say that 'the entire content of your web page goes here' I mean it. Put all your other div tags and site content between these two points. The 'auto' margin in the css is making sure that the gap either side of the 'wrapper' div tag is equal and, therefore, in the centre of the page.
I design sites mostly at 800px wide which is why I have set the div width as this. This is because it is the size which will generally fit on most size monitors (think about laptops) and at most screen resolutions. The only thing to be aware of is the increase in use of widescreen monitors. This may cause your 800px to look a bit dwarfed on the screen.
