Fri, 2007-05-25 01:50
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.
Fri, 2007-05-25 03:24
#1
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.
Fri, 2007-05-25 13:09
#2
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.