CSS QUICKIE

This is a little tutorial on how to create that Centerd Content layout that we all love.Lonely Flower is a typical example of such design.
Its quite simple. First thing you need to do is to create the DIV element that will contain the contents and then give it the required dimension via your css. for example:

This is my HTML:
< div id='main_container'>< /div >

and this is my CSS:

div#main_container
{
width:700px;
height:600px;
background-color:#fff;
border: #eee thin solid;
}


With the above code you have your styled DIV. To now move it to the center, to the already defined style just add:

margin:auto;

This will move the DIV to the center of the screen and the reason this is so is because the 'auto' value given to the 'margin' property will autamically assign the required amount of margin space to all the four sides of the div; thereby pushing it to the center.