CSS Div height problem

dryjoy · #1 (**permalink**) Jan 6th, 2008, 17:59

Hi. I KNOW this is a very poular query and I have searched here there and everywhere for a solution, and found it. However, the implementation doesn't seem to be working for some reason.
I just want the navbar on the side of my page to be 100% of the height of the page, and as far as I can see, I have made sure that all the parents have a 100% height.

Here is the webpage so far (less content):

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> Example </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<div id="container">

<div id="header">
content
</div>

<br>

<div id="mainbody">
content
</div>

<div id="navbar">
<p align="center">
content
</p>
</div>

</div>

And here is the style sheet:

<style type="text/css">

html, body {height: 100%}

#container {max-width: 800px; height: 100%; margin: 0 auto;}
#header {width: 800px; height: 100px; background-color: green;}
#navbar {width: 200px; height: 100%; float: left; background-color: blue;}
#mainbody {width: 580px; height: 100%; float: right; background-color: #DEDEDE;}

a:link {color: red; font-weight:bold;}

.headertitle {color: #DEDEDE; font-size: 20pt; text-align: center; font-style: italic;}

.maintext_title {color: blue; font-size: 16pt; text-align: center; font-style: italic;}
.maintext_subheading {color: blue; font-size: 10pt; text-align: centre; font-weight:bold;}
.maintext_quote {color: black; font-size: 10pt; text-align: center; font-style: italic; font-weight:bold;}
.maintext {color: black; font-size: 10pt; text-align:center; font-style: normal;}
.maintext_notcenter {color: black; font-size: 10pt; text-align:left; font-style: normal;}

.navtext {color: red; font-size: 14pt; text-align:center; font-style: bold;}

</style>

Any idea why this isn't working?

Jack Franklin · #2 (**permalink**) Jan 6th, 2008, 18:05

I'm afraid full height is not that simple. I googled it and found some interesting results
http://www.google.co.uk/search?hl=en...f+browser&meta=

http://www.communitymx.com/content/a....cfm?cid=BAD95

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
100% height on content problem	jasonmillward	Web Page Design	1	Apr 9th, 2008 14:08
box height problem in Safari	Colm Osiris	Web Page Design	3	Oct 27th, 2007 14:52
Height problem	frinkky	Web Page Design	2	Jan 16th, 2007 15:14
Firefox and 100% height problem	monkey64	Web Page Design	17	Sep 29th, 2006 23:09
css problem - div height	edd_jedi	Web Page Design	3	Aug 30th, 2006 19:38

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Div height problem