Layout advice

Hello Geniuses…
I don’t have any code for the question which i am going to ask… I didnt have done this earlier,so need an idea here. I have made a blueprint for idea in paint here.

the fixed div should cover the whole screen as per user screen ratio. the inner div should have dimensions which can be adjusted as per screen ratio. Everything will be shown inside it, The inner div should have scroll bar so data can be scrolled…same in the way as i am typing the message here now.
Will be really grateful if someone tells me how to do this

Thanks
Shail

Hi,

Designing something in paint and then trying to fit your project into a drawing is not the best way to create a site :). You really should have content first and then decide the best way to present the content rather than the other way around.

Your drawing is a little ambiguous anyway so you will need to clarify a few points before we give hints:

You have text saying ‘fixed area’ but what is fixed exactly? The text itself or the whole yellow background. If its the yellow background then what is its purpose? If its just a background colour then you can do that on the body easily.

I’m guessing you are looking for something like this (not supported in IE7 and under):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html { box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit;}
html, body,.wrap {
	height:100%;
	margin:0;
	padding:0
}
body{background:yellow}
.wrap {
	display:table;
	width:100%
}
header{height:1px}
header,main{display:table-row;}
h1 {
	width:80%;
	margin:40px auto;
	border:5px solid #000;
	background:#fff;
}
.scroll{
	width:80%;
	height:90%;
	margin:auto;
	overflow:auto;
	border:5px solid #000;
	background:#fff;	
}
</style>
</head>

<body>
<div class="wrap">
		<header>
				<h1>Header</h1>
		</header>
		<main>
				<div class="inner"></div>
				<div class="scroll"></div>
		</main>
</div>
</body>
</html>