Home Karmen For You Tuts Games xoxo updates Res Listed Credits LinkMe Cbox

Css: centering your layout

It is always a good idea to center your layout by using div containers, which I will be explaining in this tutorial. You can also use this tutorial to help you make a basic layout.
Many people use attributes like position: absolute, which is not the correct way to center a layout. Doing this means that the layout will be positioned from the top, bottom, left, or right (whichever one you choose) and it will only look like that in that specific resolution. Change your screen resolution and it won’t be centered.
Using div containers means that your layout will be centered in all resolutions – big, small, medium – whatever that may be.

The Container: CSS

Now, of course you may have a different set-up from this, but this is just an example of a typical layout with a sidebar on the left and content on the right, with a header image.
This is the CSS code for a standard container div:

Copy that into your CSS file.
The margin: 0 auto is the key. This is what gets the layout centered.
Obviously the width gives the width of the entire container. If you’re going to have a header image, be sure to keep it at this width if you want it to span across the top of the sidebar and content.
Sometimes you want the top and bottom edges of your layout to “stick” to the edges of the screen – in which case you would place this in your CSS:

Additionally, you may need to add text-align: center; to the body section to ensure that the layout centers in Internet Explorer.

Header Div

The header div is basically what will contain the header image of your layout.

In the above coding, simply replace image URL with the URL of your header image. You may also edit the other attributes and add padding if you need.

Sidebar DIV

Let us assume you want your sidebar on the left side and have its width at 150.
Here is your CSS code. Note that we have set the width at our 150 and the height at auto. This means that regardless of how much content is in the sidebar div, the page will accomodate it without having an extra silly scrollbar; it will simply fit.

Notice the float: left; element. Floats are an important element of CSS based layouts. When you float something to the right or left, it will remain as far as possible to that side.
Thus, floating the div to the left means it will stay to the left.
As a side note: All floating elements must have a width declared.

Content DIV

The content div is simple, once you know where the sidebar goes. Obviously the content div will verge to the right.

The width of the content div and the sidebar div, including padding, should add to the width of your container. If they don’t, you could end up with your content under your sidebar instead – meaning you have to reduce the width so it fits next to it.
In another case you could have a rather large blank space, so try to fill that up.

Footer Div

Now we must add a footer div. The reason we need this is because sometimes the container background appears a bit off in certain browsers. Adding the ‘clear’ attribute will allow a background to be shown behind floated divs, and allow the footer information itself to be displayed across the bottom of both your sidebar and content divs.

Of course, you may add attributes to the CSS.

The Container: HTML

Now that you have included that in your CSS, it’s time to look at the HTML.
This is really fairly simple. This is what will go in your < body > section; naturally.

Basically, the container div should surround everything on your page. Therefore the coding above would be surrounded by the body tags.
Putting it all together
Then you should put all the coding together in the following way:

Where it goes

All the coding above should do between the < body > and < /body > tags.
Here is an example with the XHTML 1.0 Transitional doctype:

It's pretty simple. It took me a while to achually learn this. I keep going back and forth cause i tend to forget. So if this has helped you. i would really appreciate if you linked back..