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;
}
