I am working on this page.
My problem is the Div columns will not stretch to 100%, or 100% seems to be the users screen height and not the content height. I would like all the columns to stretch to the height of the page content.
http://www.rewitec.ca/index.php?CategoryID=53
I am using an external style sheet.
Here is the code:
Expand|Select|Wrap|Line Numbers
- /************ PAGE LAYOUT *****************************/
- html,body {
- float:left;
- background-image: url(images/background.png);
- background-repeat: repeat;
- height: 100%;
- margin:0;
- padding:0;
- }
- /************ HEADER **********************************/
- #header {
- float: left;
- width: 100%;
- height: 114px;;
- background-image: url(images/h_spacer.png);
- background-repeat: repeat-x;
- background-position: top;
- }
- #headerpic {
- background-attachment:fixed;
- background-position: top, center;
- }
- /************ HORIZONTAL NAVIGATION BAR *************/
- #h_Nav {
- float: left;
- width: 100%;
- display: inline;
- background-color: rgb(60,60,60);
- margin-bottom: 3px;
- }
- /*********** LOGIN FORM **************************************/
- .Login {
- float: right;
- width: 100%;
- text-align: right;
- text-decoration: none;
- font-family: tahoma;
- font-size: 10;
- font-weight: bold;
- color: white;
- }
- .LoginButton {
- background-color: rgb(68, 84, 108);
- text-align: center;
- text-decoration: none;
- font-family: tahoma;
- font-size: 9;
- color: white;
- }
- .LoginTextbox {
- text-decoration: none;
- font-family: tahoma;
- font-size: 9;
- font-weight: bold;
- color: black;
- }
- /************ PAGE BODY ************************************/
- #border_left{
- float: left;
- width: 33px;
- height: 100%;
- background-image: url(images/border_left.png);
- background-repeat: repeat-y;
- background-position: top;
- }
- #border_right{
- float: left;
- width: 46px;
- height: 100%;
- background-image: url(images/border_right.png);
- background-repeat: repeat-y;
- background-position: top;
- }
- #ContentBody {
- float: left;
- width: 692px;
- height: 100%;
- background-color: rgb(255,255,255);
- }
- #TextContent {
- background-color: rgb(255,255,255);
- height: 100%;
- margin-top: 8px;
- margin-right: 8px;
- margin-bottom: 8px;
- margin-left: 8px;
- }
- /*********** VERTICLE NAVIGATION ******************************/
- #v_NavBody {
- float: left;
- width: 150px;
- height: 100%;
- background-color: rgb(69,147,216);
- }
- .v_Nav {
- background-color: rgb(0,0,0);
- text-decoration: none;
- font-family: tahoma;
- font-size: 12;
- font-weight: bold;
- color: white;
- }
- .v_SubNav {
- background-color: rgb(255,255,255);
- text-decoration: none;
- font-family: tahoma;
- font-size: 12;
- font-weight: bold;
- color: black;
- }
- form {
- margin-top: -1em;
- margin-bottom: 0;
- display: inline;
- }
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rewitec Canada</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id='header'><div id='headerpic'><img src='images/header.png' alt='Rewitec Canada'></div></div>
<div id='border_left'></div>
<div id='v_NavBody'>TEXT</div>
<div id='ContentBody'>
<div id='h_Nav'>TEXT</div>
TEXT
</div>
<div id='border_right'></div>
</body>
</html>
[/html]
please take a look at this category on the page in both FF and IE.
Where am I going wrong
Thank you for any help