Div height as percent

cyberseed · #1 (**permalink**) Apr 10th, 2007, 17:40

I have to centre a gif vertically so I started using some divs. It worked in IE but not Firefox or Morzilla. I know when using percent you need a reference point so I added a body style and set it to 100% which works for IE but does not work in Firefox etc. Can anyone help please as I am getting feed up and there must be a simple solution. The code is:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>stretch vertical</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stretch01">text here </div>
<div class="stretch02">text here </div>
<div class="stretch03">text here </div>
</body>
</html>

The CSS is:

Code: Select all

body {
 margin: 0px;
 height: 100%;
}
.stretch01 {
 height: 33%;
 width: 90%;
 background-color: #666666;
 color: #FFFFFF;
}
.stretch02 {
 height: 33%;
 width: 90%;
 background-color: #CCCCCC;
 color: #FFFFFF;
}
.stretch03 {
 height: 33%;
 width: 90%;
 background-color: #666666;
 color: #FFFFFF;
}
}

Thanks

cyberseed · #2 (**permalink**) Apr 10th, 2007, 18:55

Have found a good answer using absolute positioning at:http://www.webforumz.com/css-forum/2...ering-divs.htm

Are there downsides to absolute positioning and if so is there another way of doing this.

Cheers

Ryan Fait · #3 (**permalink**) Apr 11th, 2007, 06:53

Code: Select all

html, body { height: 100%; }

is what you should be using.

cyberseed · #4 (**permalink**) Apr 11th, 2007, 07:48

Thanks Ryan a simple solution that works, fantastico!

Ryan Fait · #5 (**permalink**) Apr 11th, 2007, 20:05

No problem

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
100% height	RZX Developer	Web Page Design	11	Mar 29th, 2008 10:23
CSS Div height problem	dryjoy	Web Page Design	1	Jan 6th, 2008 18:05
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
100% div height	jimz	JavaScript Forum	2	Mar 22nd, 2006 00:53

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Div height as percent