Original Post
I've been recently trying to brush up on some html and I've been working on a prototype for a site layout. Here's what it looks like so far: http://www.etherealdivine.com/newsite/proto_unvalidated.html. I do eventually want to get get the menu to fill the same height as the body of the document and vice versa. I've been having a bunch of trouble trying to figure out how to do this. I've tried using CSS to set the height to 100% but from what I've seen, that's all relative to the page size and any container applied to the div (such as another div). Code:
<!--<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Prototype</title>
<style type="text/css">
#title {
background-color: yellow;
float: left;
width: 100%;
height: 20%;
}
#menu {
background-color: blue;
float: left;
width: 20%;
}
#main {
background-color: green;
margin-left: 20%;
width: 80%;
}
#pic {
background-color: red;
float: left;
width: 100%;
height: 20%;
}
#contents {
background-color: orange;
float: left;
width: 100%;
overflow-y: auto;
}
#bottom {
background-color: green;
float: left;
width: 100%;
}
</style>
</head>
<body style="background-color: black">
Title
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
