Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 331
  • Last Modified:

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
0
LBGUC04
Asked:
LBGUC04
  • 2
1 Solution
 
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
 
user_nCommented:
<!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:
@LBGUC04: what??? did my solution not worked??
0
 
LBGUC04Author Commented:
no it didnt work for me sorry
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now