suttercain Posted October 1, 2008 Share Posted October 1, 2008 Hi guys,I think this is a CSS thing but may be JavaScript. I would like to create a DIV box that has a 100% width and that will ALWAYS be at the top of the page, even as the user scrolls down the page. Basically the box will "float" on the page and "move" with the page no matter how far down or up the user is on the page.Any ideas? Thanks in advance. Link to comment Share on other sites More sharing options...
Ingolme Posted October 1, 2008 Share Posted October 1, 2008 It doesn't work with Internet Explorer 6, but you can use the fixed position in CSS:div#box {position: fixed;top: 0px;} Link to comment Share on other sites More sharing options...
suttercain Posted October 1, 2008 Author Share Posted October 1, 2008 It doesn't work with Internet Explorer 6, but you can use the fixed position in CSS:div#box {position: fixed;top: 0px;}Thanks for the reply. Sadly their is still a large demographic who for one reason or another doesn't update. I need to find something that will work on IE 5.5+ and Firefox 2.0+Thanks again for the reply though. Link to comment Share on other sites More sharing options...
Jerry62704 Posted October 2, 2008 Share Posted October 2, 2008 Thanks for the reply. Sadly their is still a large demographic who for one reason or another doesn't update. I need to find something that will work on IE 5.5+ and Firefox 2.0+Thanks again for the reply though.IE5.5 has less than 1% of the market (http://www.w3schools.com/browsers/browsers_stats.asp)You can absolutely position things which works in all browsers, but it takes things out of the normal flow. Link to comment Share on other sites More sharing options...
rzea Posted October 2, 2008 Share Posted October 2, 2008 I wouldn't worry about IE5.x, I would worry about IE6... A LOT, there's a ton of millions out there that still use IE6 so, like it or not, as Web Designers/Developers we HAVE to consider them when creating a website.W3schools.com stats prove my point 100%: Just look at how close IE7 and IE6 are. http://www.w3schools.com/browsers/browsers_stats.aspNow, the simple code that Ingolme provided doesn't work in IE6, yes, but that doesn't mean you CAN'T have something fixed in IE6, in this case "...a DIV box that has a 100% width and that will ALWAYS be at the top of the page, even as the user scrolls down the page.".Here's how:All you need to do is add height: 100%; and overflow: auto; to the html and body elements. Then use position:absolute; top:0; left:0; on the DIV you want fixed:CSS: html, body { height: 100%; overflow: auto;}#fixed-div { position:absolute; top:0; left:0; background: #ddd; padding:10px; width:100%;} HTML: <div id="fixed-div">this div is fixed in Firefox and IE6</div> Another approach is to use Conditional Comments to target only IE6:HTML: <head><!--[if lte IE 6]><style type="text/css">html, body { height: 100%; overflow: auto;}#fixed-div { position: absolute;}</style><![endif]--></head><body> <div id="fixed-div">this div is fixed to the top in Firefox and IE6</div></body> CSS: #fixed-div { top:0; left:0; background: #ddd; padding:10px; width:100%;} BUT, this won't work in Google Chrome or Safari 3.x, only position:fixed; works, so what do you do?Simple, just add: html>body #fixed-div { position:fixed;} What this does is, well, is more what IE6 DOESN'T DO and that is that IE6 doesn't understand what the child ">" element is, so it ignores it completely, and instead uses the regular position:absolute; property from #fixed-div.Sooooo...The entire CSS code is: /*Fixed layer in IE6*/#fixed-div { position: absolute; top:0; left:0; background: #ddd; padding:10px; width:100%;}html>body #fixed-div { position:fixed;}html, body { height: 100%; overflow: auto;} The HTML code is: <div id="fixed-div">this div is fixed in Firefox and IE6</div> FYI, this code works in:• IE6• IE7• Firefox 2.x• Firefox 3.x• Safari 3.x• Google Chrome• Opera 9.xLet us know how it goes .Bytes, Link to comment Share on other sites More sharing options...
Jerry62704 Posted October 2, 2008 Share Posted October 2, 2008 Well said! Link to comment Share on other sites More sharing options...
jlhaslip Posted October 3, 2008 Share Posted October 3, 2008 Another version to fix things in IE (with simpler code) can be found here: http://www.cssplay.co.uk/layouts/fixed.htmlUses the * html hack for IE. Do a view source for details. Link to comment Share on other sites More sharing options...
rzea Posted October 3, 2008 Share Posted October 3, 2008 It's the same code I used (because it's the same site I have bookemarked), I just tweaked to my style because I don't like to use the *.suttercain, you're good both routes, either the code I mentioned above or the link posted.Let us know then. Link to comment Share on other sites More sharing options...
jlhaslip Posted October 4, 2008 Share Posted October 4, 2008 It's the same code I used (because it's the same site I have bookemarked), I just tweaked to my style because I don't like to use the *.so... then it is not the same code. You have removed the Star html hack. How is it the same? Link to comment Share on other sites More sharing options...
rzea Posted October 4, 2008 Share Posted October 4, 2008 Sigh.Honestly I don't care what you think, I only care if suttercain solved his/her problem or not.So...suttercain, did you solve your problem? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.