Forum Moderators: not2easy
I want a simple container with two side bars that contains allt he data of a website. [snip]
The page there works fine in both IE and Firefox. The new page I made, and copied the container and body portions of the css too, does not work. The page displays the sidebars okay but the container does not continue past the starting screen height. When I scroll the container has stopped where the page ended. I have checked the following int he html code:
1. Premature ending div tags
2. Shortened body tag
I have tried the html, body{ height: 100%; } solution and that didnt work. I can make the problem go away if i set the height value in container to auto. However, this then screws the pages with less than a page worth of content cause the container doesn't reach to the bottom of the page and it looks dumb. I have also used each attribute of the overflow tag and i dont want the middle container to have scroll bar. The page above is exactly how I want it to run. Can someone help me figure out whats wrong?
CSS Code From the New Site:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
color: #000000;
font: 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, helvetica, sans-serif;
position: relative;
background: 0px 0px 0px #669966 repeat-x;
}
.masterContainer {
height: 100%;
width: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
background: white repeat-x;
padding: 0px;
border: 1px solid black;
border-top-style: none;
border-bottom-style: none;
}
HTML Code (Header and Footer Only)
<html>
<head>
<title>.:[ Online Career Center ]:.</title>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" TYPE="text/css" HREF="candidate.css" />
</head>
<body bgcolor="#669966">
<div class="masterContainer">
...
...
...
</div>
</body>
</html>
The css code for the other page is viewable is you add style.css to the address above. Also you can view the other html source by right clicking the web page and hitting view source. Let me know if anyone can help?
[edited by: createErrorMsg at 7:10 pm (utc) on Sep. 22, 2005]
[edit reason] No URLs please. See forum charter [webmasterworld.com] [/edit]
html, body {
height: 100%;
margin: 0px;
padding: 0px;
color: #000000;
font: 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, helvetica, sans-serif;
position: relative;
background:#669966 url("images/background.gif") repeat-y center top;
}
.masterContainer {
height: 100%;
width: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
background: white;
padding: 0px;
border: 1px solid black;
border-top-style: none;
border-bottom-style: none;
}
seemed to fix the problem...
