How can we design a site with fixed side bar or any other divs. What I mean is when we scroll the page the side bar should remain fixed. I have used the tag 'position: fixed', it works ok in opera and firefox. But doesnot work in IE. How can we do this so that it works in all browsers. The example is : http://www.magickalmoon.com/
IE versions above IE 6 support fixed positions with CSS. For fixing IE 6 issue, this page may help you.
Thanks 4 d reply. Its a good page. but little longer code. Is there another way? The site I mentioned, i think uses some other technique, because i couldn't find it in their source code.
From my view, the page you mentioned does not function properly in IE 6. The website I linked to actually uses quite short code to create the desired functionality. Below I link to my working example with comments. Direct Link to Example Link to Editable Example
You haven't said what goes into that sidebar, but be aware that any overflow, due to smaller viewports, will be lost, and unrecoverable. Do take care; the gotcha will bite your butt. cheers, gary
zecoparera, the site you mentioned is my personal site, and others have mentioned that you can lose elements in smaller screens.. this is true, and it also looks pretty bad on a wide screen. If you can disable images, try viewing the page without, to see where the divs are.. or, send me a message and I am happy to share the code with you. It's valid in the html validator, but I don't design specifically for IE. The way I did it was to design the actual image, then chop it to pieces and place it in fixed divs.
Demo I wrote up ... wow, three years ago. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { margin:0; padding:0; } body, html { height:100%; overflow:hidden; } p { margin:1em 0; } #fixed { position:absolute; left:50%; top:50%; width:30em; height:16em; line-height:16em; margin:-8em 0 0 -15em; text-align:center; background:#CCC; filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; } #container { height:100%; padding:0 0.5em; overflow:auto; } </style> </head><body> <div id="fixed"> Your image or other 'fixed' stuff goes here. </div> <div id="container"> <p> Some test para's to pad the height out for testing that the fixed image stays on top. Of course if you want it underneath, just set a z-index on #container, and put anything you want on top at a higher z-index, and anything that would be below the content at a lower z-index. Of course this page uses the 'emulate position:fixed with absolute' method, so you could affix your 'fixed' content anywhere you like. </p><p> It does have the drawback that to center something you need to know it's width and height. A tiny bit of .js to adjust the dimensions and margin 'tricks' would simplify things a bit. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p><p> Some test text. Some test text. Some test text. Some test text. </p> </div> </body></html> Code (markup): Copy live here: http://battletech.hopto.org/html_tutorials/fixed_element.html Just play with the positioning of #fixed. Anything absolute positioned OUTSIDE #container should behave as if it was fixed. Just beware that the right side of the display can be a bit... unpredictable.
You may need to set your body to width, height 100% so with body width and height set to 100%, and you fixed div left and top to 0; You should be set. shadow covers this in his example. instead of the 50%, try using 0 for your top and left.