I have seen this issue on the forum and have tried the suggestions, but my container does not go down to the bottom of the page without specifying a height in FF. Here is a link to the page: http://www.mtsu.edu/~provost/index_test.php
The html (minus the details) is: stuff
The css is:
html, body {
min-height: 100%;
}
#container {
text-align:left;
width: 677px;
min-height: 100%;
margin: 0 auto;
background: #fff url(http://www.mtsu.edu/~provost/images/sidebar_bg.gif) repeat-y left top;
background-color: #FFFFFF;
border: 1px solid #666666;
padding: 0;
border-bottom: 25px solid #006699;
}
#header {
position: relative;
height: 102px !important;
_height /**/:112px;
background-color:#006699;
}
#sideBar {
position: relative;
z-index: 1000;
float: left;
display: inline;
width: 196px;
background-color: #fff;
}
#content {
width: 460px;
min-height: 100%;
float: right;
display: inline;
margin: 0;
padding: 0;
margin-left: 10px;
padding-right: 10px;
z-index: 1000;
}
#footer {
padding: 20px 10px 0px 10px;
margin: 20px 0px 20px 30px;
border-top: 1px solid #666;
_height: 1%;
overflow:auto;
width: 360px;
}
#footer p {
font-size: 10px;
text-align: center;
margin-bottom: 10px;
}
I've been using a template at TTU (http://www.depts.ttu.edu/agriculturalsciences/) and have studied the css. I can't figure out what they've done differently.
It's because you haven't
It's because you haven't contained the floats properly. Adding overflow: hidden to #container will sort it out in FF but it's probably best to read up on float clearing.
That did the trick!
Thank you, Tyssen! That one little style fixed the problem! You're right - I'll read up on containing floats. Thanks again.