Footer floating to the top even though used CSS listed here
I have tried all of the CSS listed on this site and others and cannot get a footer on my page to appear at the bottom...right now it's floating in the top half of the page. Below is my CSS; it may have a lot of extra stuff because I've tried everything, and this is my first site.
See: www.medsocialgroup.com
Thank you!
CSS
<!-- language: lang-css -->
body {
text-align: center;
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
color: #333;
background-image: url(dropshadow.jpg);
background-repeat: repeat-y;
background-position: center center;
margin:0;
padding:0;
height:100%;
}
div.wrapper
{
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top:20px;
width:790px;
min-height:100%;
height:auto
height: 100%
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
}
#medcommunity{
font-size:36px;
color: #999;
}
#left_column{
float:left;
margin-left:0px;
width:390px;
height:420px;
border-right-width: thin;
bord开发者_开发知识库er-right-style: double;
border-right-color: #CCC;
}
#logo{
float:left;
clear:left;
margin-top:100px;
margin-left:0px;
}
#right_column{
float:right;
padding:0;
width:385px;
height:420px;
font-family: Verdana, Geneva, sans-serif;
color: #333;
font-size: 16px;
text-align: left;
}
#webtext{
margin-top:75px;
font-size: 20px;
}
#menu{
background-color:#CCC;
width:100%;
height:40px;
margin-top:50px;
padding-top: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-weight: lighter;
text-align: center;
background-position: center center;
color: #FFF;
}
#footer{
background-color:#CCC;
width: 100%;
height:50px;
color: #CCC;
border-top-width: thin;
border-top-style: double;
border-top-color: #999;
text-align: center;
}
If you use clear:both; on the footer div, that will help push the footer to the bottom, but it still won't go all the way down for some reason, I don't know why.
Also, if you use the following rules instead of the clear:both; that I suggested above,
#footer {
background-color: #CCCCCC;
border-top: thin double #999999;
color: #CCCCCC;
height: 50px;
/* Try these new ones */
left: 0;
bottom: 0;
position: absolute;
width: 100%;
}
The footer seems to drop to the bottom okay. But this only works in Firefox 5, I tried it in Chrome and it didn't work there. I tried position: fixed; like @mu suggested in Chrome and Firefox 5, and it sort of works, you have to specify width: 100% though. The problem with this is that the footer is fixed to the bottom of the browser viewport, so if you resize the browser and make the window shorter, the footer travels with the bottom edge of the viewport, which I don't think you want.
Using Ryan Fait's Sticky Footer, I came up with this:
http://jfcoder.com/test/medsocial.html
These are styles I added or altered:
/* Sticky Footer by Ryan Fait http://ryanfait.com/ */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -39px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 39px; /* .push must be the same height as #footer */
clear: both;
}
/* Other styles that help fix the top */
.wrapper {
margin-top: 0 !important;
}
#menu {
background-color:#fff;
margin-top: 0;
padding-top: 50px;
}
#menu div {
background-color:#CCC;
width:100%;
height:40px;
padding-top: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-weight: lighter;
text-align: center;
background-position: center center;
color: #FFF;
}
#medcommunity {
margin-top: 55px;
}
And the markup (note the DIV#push that was added):
<body>
<div class="wrapper">
<div id="menu"><div>HOME | HOW IT WORKS | SERVICES | CONTACT US</div></div>
<div id="medcommunity"><p>medical + community</p></div>
<div id="left_column"><img src="msgrouptransp.png" id="logo" width="325" height="120" alt="medsocial" /></div>
<div id="right_column">
<p id="webtext">Social Media Solutions for the Medical Community</p>
<p>We help Hospitals, Medical Groups, Physicians, and more to connect with their communities via Facebook, Twitter, and other social media sites. </p>
<p>Find out <u>How it Works</u>.</p>
</div>
<div class="push"></div>
</div>
<div id="footer"></div>
</body>
加载中,请稍侯......
精彩评论