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?