Hi guys I’m trying to add a css footer but can’t it to work right. For now I’m tweaking it like crazy and if it appears fine in firefox it gets all messed up in Internet Explorer 7 ahd sometimes is halfway up teh page :(. Is there any good example out there for a css based footer.
Consider that my page has a fixed width, 2 columns of varying height and my footer has a 100 percent width.
Well I’m using the css sticky footer as is – it seems to work fine in firefox but with IE my footer is floating halfway up the page. I have noticed that my footer hangs on the bottom of the browser viewport height. I think its how IE is interpreting the height to be 100 percent of so. The css sticky footer works fine on its own but as I put my modifications and additions it gets messed up in IE. The basic code for the footer and header is as so:
@charset 'utf-8'; /* CSS Document */ html, body, #wrap {height: 100%;} body > #wrap > #main > #pageContent {height: auto !important; min-height: 100%;} #main { background-color:#FFFFFF; width:960px; height:100% !important; text-align:left; position:relative; } #footer { display:block; width:100%; text-align:center; position: relative; height: 150px; clear:both; } /* CLEAR FIX*/ .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ And the HTML is somewhat like this
<div id='wrap'> <div> header is here</div> <div id='main' class='clearfix'>content is here </div> </div> <div id='footer'></div> Where am I messing it up
I got it sorted – for some reason there were two instances of clear:both although I don’t see how that was causing a problem but removing the redundant entry fixed it :\ one of those weird solutions which don’t seem to make any sense. Thanks anyway guys.