Hi, Does any one no how to fix the problem with centering a div and using position: fixed; in the same css. Thanks Joe
Easy. Don't use fixed positioning since it removes the element from the flow and afixes it relative to the top and left (which are the defaults). Instead, just set a width on the container, and then set the left and right margins to auto.
Well, there are cases where position:fixed (or emulating it with an extra 100% height wrapper) might want to have something centered - solution? Create a 100% width wrapper, put the position:fixed on that, then center the element in that wrapper.
Hi, Well i need the div to be fixed thanks anyway. Thanks but i couldent get this to work. Ino i could do it with js and some maths to set the left so its in the center this works for the large iframe (view here) but with my flash object i will need to work out the maths to get the center of the page depending on the size of the div which is set in the js iv made if any one could help me with the maths to get the center of the page it will be a great help. Would it be like: page width/2-divwidth/2 Thanks Joe EDIT: Hi well i tried my maths out and it worked just having problems geting it in the middle of the page height ways if any one can help. Thanks Joe
CSS markup: #content { position: relative; left: 50%; width: 740px; margin: 0 0 0 -370px; } Your XHTML markup: <div id="content"> <!-- Your web site contents. --> </div>
No need to get that complex - check this: <!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; } /* This removes normal scroll behavior */ html, body { height:100%; overflow:hidden; line-height:1.2em; /* I NEVER trust the default */ } p { margin:1em 0; } /* so here we can make our own scroller - anything 'outside' #height_container set to position:absolute will behave like position:fixed in all browsers - netting us lte IE 6 support Since this method works for all browsers, we can just use this technique for all of them. */ #height_container { height:100%; overflow:auto; } /* we should add a wrapper for padding top/bottom so that our scrollbar let's us scroll past our fixed boxes */ #height_wrapper { padding:3em 0; } #fixed_header, #fixed_footer { position:absolute; width:100%; left:0; text-align:center; /* IE 5.x centering */ } #fixed_header { top:0; } #fixed_footer { bottom:0; } .centered_box { line-height:3em; width:20em; color:#FFF; background:#00F; margin:0 auto; } #fixed_footer .centered_box { background:#C00; } </style> </head><body> <div id="height_container"><div id="height_wrapper"> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> <p>Whole bunch of para's to give us some height</p> </div></div> <div id="fixed_header"> <div class="centered_box"> This should remain 'fixed' top center. </div> </div> <div id="fixed_footer"> <div class="centered_box"> This should remain 'fixed' bottom center. </div> </div> </body></html> Code (markup): I believe that's what you are trying to accomplish, right? I used the 'cross browser' fixing method instead of position:fixed - no reason to waste time coding something that 40% of the world (aka IE 6 users) cannot access. I also added one on the bottom just to show that works too... and it works in IE 5.5 (not sure about 5.2 - my dellmac is on the fritz)