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
LBGUC04Asked:
Who is Participating?
 
user_nConnect With a Mentor Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
      <style type="text/css">
      #div_15{
            height:15%;
      }
      #div_80{
            height:80%;
      }
      #div_5{
            height:5%;
      }
      #div_full{
            position:absolute;
            width:100%;
            height:100%;
            display:block;
      }
      </style>
</head>
<body>
<div id="div_full">
      <div id="div_15"></div>
      <div id="div_80"></div>
      <div id="div_5"></div>
</div>
</body>
</html>
0
 
Gurvinder Pal SinghCommented:
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

0
 
Gurvinder Pal SinghCommented:
@LBGUC04: what??? did my solution not worked??
0
 
LBGUC04Author Commented:
no it didnt work for me sorry
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.