Jumpstart: How to approach site layout

Designing a well thought site layout may be more important than you think, when your projects get deeper than you assumed. Beside the fact that it usually gets deeper than you initially thought (project never stays as it is), clients have the tendency to demand something at the very end of the project and expect it to be magically happening with one click. So you probably would not want to change the whole layout when your client wants some part of the website wider, shorter, completely out, completely in or some other option which is slightly possible.
It may be handy to keep in mind that in order to increase control over your website, it's vital to divide it into several div's rather than trying to control it as one big division and trying to move things around. This way you will adjust only the related division in case of a change.
We can give a simple stylesheet example such as:

body
{
background-image:url("bg3.jpg");
font-family:Corbel;
font-size:medium;

}
#main
{
background-color:Teal;
margin:0 auto;
width:1200px;
height:640px;

}

#above
{
margin:0 auto;
width:1000px;
height:300px;
margin-top:15px;

}

#below
{
margin:0 auto;
width:1000px;
height:300px;

}


#upLeft
{
background-color:Aqua;
width:500px;
height:300px;
float:left;

}

#upRight
{
background-color:Silver;
width:500px;
height:300px;
overflow:auto;
}

#lowLeft
{
background-color:Lime;
width:500px;
height:300px;
float:left;
}

#lowRight
{
background-color:Fuchsia;
width:500px;
height:300px;

}

which should turn out like:




Ugly huh? Now it's up to you to adjust anything you may want from there. You may divide the site according to your needs. It may be a good idea to give margin to your main background division to make it appear in the centre depending user's screen resolution.
You achieved this with:

margin:0 auto;

which automatically places the div in the middle of the screen measuring it according to the right end of the screen.

Whatever changes you may do, it would be time saving and less complicated to do them at the stylesheet and leave the code side to your form, this way in long term you will know what is written where and you may adjust it according to your needs without spacing out from your on hand work, just like the same logic behind Data Access Layer(DAL).