Hi all, I know this question gets asked a lot because I have looked at many "solutions" trying to
get this to work for me. I can
get it to work if I hack up
the html but I want to use all CSS. All I want is a header with two columns below it, and I want these three items to fill
the entire page/screen, and I want to do it with CSS and without frames or tables.
The XAMPP user interface looks exactly how I want my page to look, but again, I do not want to use frames. I cannot
get the two orangeish colored columns to extend to
the bottom of
the screen. I do have it so it looks like
the right column extends to
the bottom of
the screen just by changing
the body background color to
the same color as
the background color of
the right column, but I would like both columns to extend to
the bottom so I didn't have to do that. Here is what I have so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead">
MY SITE</div>
<div id="left_col">
Employee Management<br />
<a href="Employee%20Management.php">Add New Employee</a><br />
<a href="Employee%20Management.php">Edit Existing Employee</a><br />
<br/>
Load Management<br />
<a href="Load%20Management.php">Log New Load</a><br />
<a href="Load%20Management.php">Edit Existing Load</a><br />
<br/>
Report Management<br />
<a href="Report%20Management.php">Employee Report</a><br />
<a href="Report%20Management.php">Load Report</a></div>
<div id="page_content">
<div id="page_content_heading">Welcome!</div>
Lots of words</div>
</div>
</body>
</html>
CSS
#masthead {
background-color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:xx-large;
font-weight:bold;
padding:30px;
text-align:center;
}
#container {
min-width: 600px;
min-height: 100%;
}
#left_col {
padding: 10px;
background-color: #339933;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
width: 210px;
}
#page_content {
background-color: #CCCCCC;
margin-left: 230px;
padding: 20px;
}
#page_content_heading {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
}
a {
color:#0000FF;
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
}
a:hover {
color:#FF0000;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
