dagger2002
Programmer
Ok all I have a small problem, well big in a sense that my page isn't working. I am kinda new to css as a layout tool.
So here is the problem. I have a table less layout. But my container tag isn't doing what it is suppose to and filling with white all the way to the bottom.
I have validated the css and it validates, and the resulting html also validates, resulting because this site is generated out of a database.
Here is the css:
and here is the resulting page
So here is the problem. I have a table less layout. But my container tag isn't doing what it is suppose to and filling with white all the way to the bottom.
I have validated the css and it validates, and the resulting html also validates, resulting because this site is generated out of a database.
Here is the css:
Code:
body
{
margin: 0;
background-color: #CCCCCC;
text-align: left;
text-indent: 0em;
vertical-align: top;
text-transform: none;
text-decoration: none;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
font-size: 10pt;
line-height: normal;
font-style: normal;
font-variant: normal;
font-weight: 500;
color: #333;
}
a:link {}
a:hover{}
a:visited {}
a:active{}
.container
{
width: 800px;
padding: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
background-color: purple;
height: 100%;
clear: both;
display: block;
}
.header
{
width: 800px;
padding: 0px 0px 0px 0px;
margin: 0px;
background-color: red;
}
.mainNav
{
width: 200px;
background: white;
/* border-right: 2px gray solid;*/
padding-top: 5px;
margin-top: 0px;
border-bottom: 5px #003366 solid;
display: block;
float: left;
}
.content
{
width: 588px;
padding-top: 5px;
margin-top: 0px;
float: right;
display: block;
background-color: white;
padding-left: 10px;
border-left: 2px #003366 solid;
}and here is the resulting page
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Title</title><link rel='stylesheet' type='text/css' href='main.css' />
</head>
<body >
<div class="container">
<div class="header">
<img src='../images/hdNews.jpg' vspace='0' hspace='0' border='0' />
</div>
<div class="mainNav">
<p><a href='index_main_CSS.php?id=1'>Regional Occupational Program</a></p>
<p><a href='index_main_CSS.php?id=2'>ROP</a></p>
</div>
<div class="content">
Sample Page
</div>
</div>
</body>
</html>