bigcheez Posted July 12, 2010 Share Posted July 12, 2010 I am attempting to use a fixed div at a width of 960px.To center the fixed div I use left:50% and margin-left:-480px.That is all fine and dandy when the browser window is 1024px wide.But if the browser is resized smaller, the left side of the div moves off the left of the window without a scroll bar.How can I fix it so that centered and fixed div does not move farther than the left edge of the window? Link to comment Share on other sites More sharing options...
thescientist Posted July 12, 2010 Share Posted July 12, 2010 left itself is not a valid property.All you really need to do to center a div on the page is use this: #div{ margin: 0px auto;} Link to comment Share on other sites More sharing options...
bigcheez Posted July 13, 2010 Author Share Posted July 13, 2010 left itself is not a valid property.All you really need to do to center a div on the page is use this:#div{ margin: 0px auto;} Can you confirm that this works on fixed divs?Because it aint working for me. Link to comment Share on other sites More sharing options...
Synook Posted July 13, 2010 Share Posted July 13, 2010 Can you show the rest of your code? There could be another property interfering.P.S. thescientist, left is a valid CSS property, though it has no effect without a companion position attribute. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2010 Share Posted July 13, 2010 He is using a position:fixed;? isn't he?, thought that what he meant by a fixed div. Link to comment Share on other sites More sharing options...
bigcheez Posted July 13, 2010 Author Share Posted July 13, 2010 He is using a position:fixed;? isn't he?, thought that what he meant by a fixed div. Correct, sorry that was unclear.Can you show the rest of your code? There could be another property interfering. Here is a test example:<!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" xml:lang="en" lang="en"><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <style type="text/css">body{background-color:gray;} #test_div1{background-color:red;border-color:yellow;border-style:solid;border-width:3px;position:fixed;top:10px;width:800px;height:100px;margin:0px auto;}#test_div2{background-color:green;border-color:yellow;border-style:solid;border-width:3px;position:fixed;top:120px;width:800px;height:100px;left:50%;margin-left:-400px;} </style> <title>Fixed & Centered Div</title></head> <body> <div id="test_div1"></div> <div id="test_div2"></div> </body></html> Link to comment Share on other sites More sharing options...
bigcheez Posted July 14, 2010 Author Share Posted July 14, 2010 what ... did I stump all you? Link to comment Share on other sites More sharing options...
thescientist Posted July 14, 2010 Share Posted July 14, 2010 well, did you try centering it without using fixed positioning? Centering it with margin will keep it centered now matter the the window size. You can always use max and min width's for more control at certain window widths. Link to comment Share on other sites More sharing options...
bigcheez Posted July 14, 2010 Author Share Posted July 14, 2010 I was able to get a scrollbar when the window is smaller than the div by using: html{position:absolute;overflow:scroll;width:820px;}body{position:relative;} But scrolling does not scroll the div as expected Link to comment Share on other sites More sharing options...
dsonesuk Posted July 14, 2010 Share Posted July 14, 2010 I think whatever you do with outside elements, its not going move its set position of center, because of it being fixed, it is out of the flow of other elements constraints, its not the same as when you are using position absolute element, inside a position relative element. Maybe wrong here, but i think you fighting a battle you cannot win, but good luck. Link to comment Share on other sites More sharing options...
bigcheez Posted July 14, 2010 Author Share Posted July 14, 2010 I think whatever you do with outside elements, its not going move its set position of center, because of it being fixed, it is out of the flow of other elements constraints, its not the same as when you are using position absolute element, inside a position relative element. Maybe wrong here, but i think you fighting a battle you cannot win, but good luck.So if a div has these properties ...#mydiv{position:fixed;width:800px;left:50%; /* these two properties are needed to center */margin-left:-400px; /* a fixed div, please correct me if I am wrong */} ... and the user resizes their browser window to less than 800 pixels wide, they cannot scroll to see the entire element? Link to comment Share on other sites More sharing options...
thescientist Posted July 14, 2010 Share Posted July 14, 2010 #myDiv{ width: 800px; margin: 0px auto;} will center a div just fine. no position, no left margin, no left. If you don't want the div to get squished when the user resizes, then add #myDiv{ width: 800px; min-width: 800px; /*this will make scroll bars appear and not "collapse" the div*/ margin: 0px auto;} try that and see what happens Link to comment Share on other sites More sharing options...
dsonesuk Posted July 14, 2010 Share Posted July 14, 2010 just looked what w3schools say about position fixedhttp://www.w3schools.com/css/css_positioning.asp Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled:Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist. Fixed positioned elements can overlap other elements.I think enough said. Link to comment Share on other sites More sharing options...
bigcheez Posted July 14, 2010 Author Share Posted July 14, 2010 I think enough said. I was not trying to pick a fightjust looked what w3schools say about position fixed I guess I am forced to capitulate, even though it seems counter-intuitive to memaybe I will resort to javascript Link to comment Share on other sites More sharing options...
thescientist Posted July 14, 2010 Share Posted July 14, 2010 really, is there something other than centering a div that you are trying to accomplish? What is the fixed positioning for? (maybe i just lost sight of its necessity over the course of thread).edit: is it to keep a div always at the on the page even the user scrolls vertically? Link to comment Share on other sites More sharing options...
bigcheez Posted July 14, 2010 Author Share Posted July 14, 2010 is it to keep a div always at the on the page even the user scrolls vertically?yup Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.