Solved

CSS positioning horizontal blocks

Posted on 2011-02-11
4
300 Views
Last Modified: 2012-05-11
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
Comment
Question by:LBGUC04
  • 2
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34869891
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
 
LVL 9

Accepted Solution

by:
user_n earned 500 total points
ID: 34869913
<!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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34870089
@LBGUC04: what??? did my solution not worked??
0
 

Author Comment

by:LBGUC04
ID: 34888443
no it didnt work for me sorry
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
daypilot scheduler 3 26
ebay style="image-orientation: 90deg;" 2 37
IIS redirect 1 68
updating order of the rows, N+1 query issue, C#, asp.net, MVC, SQL Server 3 26
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question