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