Here is quick sample:
<html>
<head></head>
<body>
<div class="main">
<div class="heading">
Heading here
</div>
<div class="nav">
Navigation
</div>
<div class="content">
content
</div>
<div class="footer">Footer here</div>
<div>
</body>
</html>
/*CSS*/
html, body{height:100%; width:100%}
.main{width:500px;height:100%; margin:0 auto;border-right:1px solid #ddd; }
.heading{clear:both; height:6%;text-align:center;background-color:#eee}
.nav{height:90%;width:150px; float:left; background-color: #ddd;padding-left:5px;}
.footer{height:4%; background-color:#eee;clear:both;text-align:center;}
View it on jsfiddle
jsfiddle full screen[
^]
jsfiddle Source view [
^]
Here is a simple version of the solution above with description:
1. to make sure that your website stay full width and height of the browser set the html and body tags to have 100% on both height and width. For visibility I have the website to look silver background
2. To make your main content stay always in the middle, set its width and give it a 'margin: 0 auto'. What this means is that your main content will have top and bottom 0 while its left and right adjust automatically with the browser width and stay centred. ('margin: 0 auto' is short for 'margin: 0 auto auto 0')
Again for visibility I have given the content area a white background
<html>
<head>
</head>
<body>
<div class="main">
this is your main content, always centered
</div>
</body>
</html>
/*css*/
html,body{
height:100%;
width:100%;
background-color:silver
}
.main{
height:100%;
width:400px;
margin:0 auto;
background-color:white;
padding:5px;
}
Here is the preview for this demo on
jsfiddle[
^]