Link to home
Start Free TrialLog in
Avatar of LBGUC04
LBGUC04

asked on

CSS positioning horizontal blocks

i want to split my spreadsheet into three horizontal blocks top, middle and bottom. I want the top to take up 15% of the screen, the middle 80% and the bottom 5%. I also want them to keep these % as the browser window is resized. Ive tried looking at relative , floating etc but havnt been able to work this one out
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

this one worked for me

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		body, #container
		{
			height:100%;
			width:100%;
		}
			
		.header
		{
			height:15%;
			width:100%;
			background-color:black;
		}
		.content
		{
			height:80%;
			width:100%;
			background-color:blue;
		}
		.footer
		{
			height:5%;
			width:100%;
			background-color:red;
		}
	</style>
</HEAD>

<BODY>
	<div id="container">
		<div class="header"></div>
		<div class="content"></div>
		<div class="footer"></div>
	</div>
</BODY>
</HTML>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of user_n
user_n
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@LBGUC04: what??? did my solution not worked??
Avatar of LBGUC04
LBGUC04

ASKER

no it didnt work for me sorry