I'm working on a design right now and I'd like to be able to stretch a given DIV (id="navigation") the whole way down the page, but I'm not sure how to.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Contacts Book</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<div id="header"><h1>Contact Book</h1><hr></div><div id="content">
<div class="male"><h2><a name="0">David Ketter</a></h2><hr class="name">
<p>Other forms of contact:<br>
Main Email: d.ketter@example.org</p>
<h3>Personal Information</h3>
<p>Notes:</p><p>Lorem Ipsum blah blah blah</p></div><hr>
<div class="female"><h2><a name="1">Jordan Morris</a></h2><hr class="name">
<p>Other forms of contact:<br>
Main Email: j.morris@example.org<br>
Secondary Email: jordan.morris@example.com</p>
<h3>Personal Information</h3>
<p>Birthday: 02-15-1993</p>
<h4>Favorites</h4>
<p>Color: purple</p>
<h4>Dislikes</h4>
<p><br>Food: meat</p><p>Notes:</p><p>Yadda Yadda Yadda</p></div><hr>
<div class="female"><h2><a name="2">Jane Doe</a></h2><hr class="name">
<p>Address:<br>123 ABC St., Apt. 4<br>New York, NY 12345</p>
<p>Contact them any time.<br>Cell: 1234567890<br>Home: 1234567899<br>Work: 0987654321</p>
<p>Other forms of contact:<br>
Fax: 0987654322<br>
Main Email: j.doe@example.org<br>
Secondary Email: jane.doe@example.com</p>
<h3>Office</h3>
<p>Title: Web Maintainer<br>Boss: Mr. Anderson</p>
<h3>Family</h3>
<h4>Immediate</h4>
<p>Mother: Jane Smith<br>
Father: John Smith Sr.<br>
Oldest Brother: John Smith Jr.<br>
Second Oldest Brother: Jack Smith<br>
Third Oldest Brother: Joe Smith<br>
Youngest Brother: Jim Smith<br>Oldest Sister: Jordan Smith<br>
Second Oldest Sister: Jacki Smith<br>
Third Oldest Sister: Jadyn Smith<br>
Youngest Sister: Jessica Smith</p>
<h4>Direct</h4>
<p>Married<br>
Significant Other: John Doe II<br>
Oldest Child: John Doe III; son.<br>
Second Oldest Child: Jordan Doe; son.<br>
Third Oldest Child: Jesse Doe; son.<br>
Youngest Child: January Doe; son.</p>
<h3>Personal Information</h3>
<p>Birthday: 01-01-1978</p>
<h4>Favorites</h4>
<p>Color: Black<br>
Food: Italian<br>
Fastfood: McDonalds<br>
Drink: milk<br>
Pet: cat</p>
<h4>Dislikes</h4>
<p>Color: green<br>Food: salad<br>Fastfood: Burger King<br>Drink: Prune Juice<br>Pet: dog<br>Biggest Fear: spiders<br>Second Biggest Fear: snakes<br>Third Biggest Fear: thunderstomrs<br>Fourth Biggest Fear: heights<br>Fifth Biggest Fear: planes</p><h4>Medical</h4><p><br>Asthmatic: no<br>Heart Condition: no<br>Allergy: dust<br>Allergy: pollen<br>Allergy: dander<br>Allergy: vinegar<br>Allergy: rose perfume</p><p><a href="http://example.com">http://example.com</a></p><p>Notes:</p><p>Just a few words to get parsed in.</p></div><hr></div>
<div id="navigation">
<p><a href="#0">David Ketter</a></p>
<p><a href="#1">Jordan Morris</a></p>
<p><a href="#2">Jane Doe</a></p>
</div></div></body></html>
That's the page, the navigation thing is at the bottom.
Code:
body {background-color:#DDDDDD;color:#000000;text-align:center;}
div.male {background-color:#DDDDDD;color:#0000CF;}
div.female {background-color:#DDDDDD;color:#CF0000;}
hr.name {width:40%;}
html,body{margin:0;padding:0;height:100%;}
div#header{position:relative;}
div#container{margin:0 auto;height:100%;}
div#content{float:left;width:80%;}
div#navigation{float:right;width:20%;background-color:#EFEFEF;height:100%;}
That is my current CSS, as you can see I have it stretch all the way down it, but it stops at the bottom of where my viewscreen starts.
__________________
PHP Code:
<?php echo "Hello World"; ?>
HTML Code:
<html><head><title>Hello World</title></head><body><p>Hello World</p></body></html>
|
