entropy Posted August 26, 2012 Share Posted August 26, 2012 I want to have a sticky footer on the bottom of the page, wherever that is, a header on the top of the page and scrolling content in the middle. This is what I have come up so far. It kind of works in FF, but in IE the footer is invisible because it is below the bottom of the visible page (scrolling). In FF there are no scrollbars appearing next to the content. Furthermore I have to fix the height of the header and footer in this way, which I want to be variable. <html><head><style type="text/css">#container {height: 100%;width: 70%;margin-left: auto;margin-right: auto;}#bottom {background: #FF00FF;z-order: 1;position: fixed;bottom: 0;width: 70%;}#top {background: #FF8000;width: 70%;position: fixed;margin-top: 0;height: 100px;}#middle {position: fixed;top: 100px;} </style></head><body><div id="container"> <div id="top"> top </div> <div id="middle"> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR>middle<BR> </div> <div id="bottom"> bottom<BR>bottom<BR>bottom<BR> </div></div></body></html> Link to comment Share on other sites More sharing options...
niche Posted August 26, 2012 Share Posted August 26, 2012 IE loves doctypes, USE FLOAT for positioning, and give your bottom div a height for starters. Then, repost your code. Link to comment Share on other sites More sharing options...
entropy Posted August 26, 2012 Author Share Posted August 26, 2012 The doctype did the trick for IE. A height on the footer does not change its height (?). This is something I found on floats in O'Reilly's CSS pocket reference: "Basic floating is generally supported by all browsers, especially onimages, but the nature of floats can lead to unexpected results whenthey are used as a page layout mechanism. Use float cautiously,and thoroughly test any pages employing it." Besides that, I wouldn't know how to apply floats in this case. Link to comment Share on other sites More sharing options...
niche Posted August 26, 2012 Share Posted August 26, 2012 (edited) That's the difference between theory and practice. div and float are the structural backbones of modern sites. Float is your friend. Embrace it. Else, you'll probably forever catch flak on coding forums when you use positioning to setup your site. Edited August 26, 2012 by niche Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now