I have several centered, equal-sized float left div's with text inside of them, with a fixed width sidebar on the right. My intent is that, if the screen is wide enough, they will all sit side-by-side and centered on the space not taken by the sidebar. When the screen is too narrow, they start to stack on each other in sort of a grid. I've gotten it to work perfectly in Opera but it fails in IE, where although everything stacks properly with screen size, it's just always floated to the left of the screen, so I'm assuming my centering logic is failing for IE, but I can't figure out why. Here's the relavent code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="../_css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="sidebar"> </div> <div id="main"> <div id="list"> <div id="item"> </div> <div id="item"> </div> <div id="item"> </div> <div id="item"> </div> <div id="item"> </div> </div> </div> </div> </body> </html> And the CSS: @charset "utf-8"; body { padding: 0; background: #000; margin: 0; font-family: "Lucida Console", Monaco, monospace; font-size: 14px; line-height: 16px; color: #CCC; } #wrapper { max-width: 1920px; min-width: 985px; padding-right: 10px; padding-left: 10px; } #sidebar { width: 200px; float: right; } #main { margin-right: 200px; } #main #list { margin-top: 5px; position: relative; float: left; left: 50%; } #main #list #item { width: 315px; margin-bottom: 10px; padding: 5px; height: 235px; margin-right: 10px; border: 1px solid #0F3; background: #333; float: left; position: relative; left: -50%; } It took a bit of research to figure out using relative positioning with plus and minus 50% left values could center something, but I can't figure out why it doesnt work in IE when from what I read it should? I guess I'm missing something simple?
That's not really the way to center something. If you want to center something horizontally in relation to the containing div, for example your div with the id list, you would use the following: #list{ margin-left: auto; margin-right: auto; } Code (markup): And that's all it takes. Then whatever you have inside your #list div can be floated left or right. I would loose all the position: relative stuff. Also, you have multiple identical id's assigned to (#item). You can only use 1 id per page. You should change these to classes. Looking at your last css entry, you've assigned the same dimensions to the containing divs and the divs your trying to float???
Margin-auto only works, from what I understand, if the element it is applied to has a width, like 1000px. On my page it is a widthless div because it changes based on the window size. When I apply margin-auto nothing changes is IE and it breaks in Opera and looks the same as IE. Using a specific width for #list does seem to emulate what I want, except when you change the window size, the five #item divs do not move anywhere, which is because they are based on a fixed width on not the window's width. Relative positioning is the only thing I have found that actually centers a widthless div to where the contained divs will move around based on window size. All the floats and relative positioning and lefts are required for this to function. Thanks for pointing out those multiple IDs. I noticed them myself a while ago and changed #item to a class. I'm not sure what you're talking about when you say the containing div has the same width as the floated divs. The containing div #main is for the main content of the page, and #list is inside of that, and neither have any width sizes applied, so both with will be the size of the window minus the sidebar and any margins or padding. Within #list is #item and it is the only specific item, a box of a certain size, five of which are on the screen and (should) move about based on the screen size.
I was able to fix my problem. I found another method of centering things in a container with no specified width. On the #list container i used text-align center and for the spans within it I used display inline-block with text-align left, and the end result is pretty much what I want. Each span is centered and moves around like text, wrapping to next line if the window is not large enough. I could have sword I tried this before but I must not have done it correctly.
It also works with percentage widths, like width: 80%. So if you wanted your container to expand/contract with the browser window and stay centered, you could use: #container{ width: 80%; margin: 0 auto; } And never mind that, because I could have swore I saw comma's separating those selectors in that last block of css. Maybe I just need my eyes checked. It's hard to visualize what you're trying to accomplish, but sounds like you got it worked out anyway.
Also, techincally, you have 4x ID="item"... that would require class="item" by w3 standards, being that if you use id="item" more than 1 time it comes back as an error through a validator
Where to start... Why several? Just use one wrapping element and set it, then let them auto-expand to fit the wrapper. Is it center, or is it float? You can't have both cross browser. PERIOD. Min-width and max-width still count as width for those purposes - which you are using... which don't exist in IE6... what version of IE are you testing against? (do you have the javascript 'expression' fallback for that?' I look at what you posted for code, and I come away with a few questions - id="list" id="item"... LIST? ITEM? Don't we have tags for that? id="item" id="item" id="item" - you do know you can't use an ID more than once on a page, right? Oh, and I see this time and time again and I REALLY have to ask - since CSS is only valid as 7 bit ASCII, and as english there is no need for anything OTHER than 7 bit ASCII, why the blue blazes do people declare charset encodings in their CSS? IF I'm understanding what it is you are trying to do - or should I say IF what I'm seeing here in opera is what you are trying to achieve - you got WAY too complex for your own good... Though you seem to talk about centering when you've got full width elements or floats - the former of which is not going to have ANY centering applied until the screen is bigger than 1920 width, the latter not even having any centering in your EXAMPLE! First, let's clean up the markup and make it VALID. <!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" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> centering test </title> </head><body> <div id="pageWrapper"> <div id="sidebar"> <!-- #sideBar --></div> <div id="content"> <ul class="stackList"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- #main --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Then get the CSS straightend out. /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } body { /* pad body NOT the min/max-width element! */ padding:0 10px; /* NEVER declare PX fonts on body! Accessibility /FAIL/ and we're not even past the first element */ font:normal 85%/130% "lucida console",monaco,monospace; color:#CCC; background:#000; } #pageWrapper { /* why the **** would you have min/max-width and NOT even bother making it 800 friendly?!? */ min-width:748px; /* 800 -20 body padding -32 browser chrome */ max-width:1868px; /* 1920-20-32 */ } * html #pageWrapper { /* IE6 and earlier have no min/max-width, but we can fake it with an expression. First, set a fixed width so if .js is disabled we have lowest common denominator fallback. */ width:748px; /* otherwise use expression for min-width */ width:expression( (document.body.clientWidth>1920) ? "1868px" : ((document.body.clientWidth>800) ? "auto" : "748px") ); } #sideBar { width:200px; float:right; } #content { margin-right:200px; } .stackList { list-style:none; margin-top:5px; overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats in IE */ } .stackList li { float:left; width:315px; height:235px; margin:0 10px 10px 0; /* I'd not set the padding here, I'd pad/margin it's content instead so IE 5.x won't result in breakage. Leaving it in for now. */ padding:5px; background:#333; border:1px solid #0F3; } Code (markup): That should be functionally similar to your example that 'works in opera', except it should work everywhere else. Min-width/max-width, floated boxes inside the container. Since your example didn't center anything, I didn't bother centering anything except at max-width - I'm really wondering what all that float and relative positioning nonsense was even for. If you want those boxes centered, inline-block may be an answer, but since IE7/earlier fails to make LI or block level containers inline-block that may not be an answer either depending on if your content for those lists is all inline-level or contains block-level elements - if it's inline-level, just set the LI to display:inline, use the word-spacing/letter-spacing trick to strip white-space between them, and then use text-align on an inline-level wrapper like SPAN. Though really, rather than all that black area around/after the images, I'd be considering maybe going mcSwitchy (well, my quick-switchy method) with this so you can customize the width of the page as appropriate.
It sure didn't used to count as a width, not in Opera or Safari. I learned this when I wanted to float a container and have only a min and max width. Worked in FF, IE, but not Opera or Safari at the time. Maybe it works nowadays, but being burned by "compliant browsers" means I never let min or max count as width on any floats of mine who need them. Instead, those browsers just shrunk-wrap everything (as they normally would on widthless floats).
If you are FLOATING it, it should NEVER work. In ANY browser. Margin:auto collapses to zero on float. That's what automatic means.... and if you want it centered, what the ***** are you floating it for?!? Floating it's children on the other hand, should make no difference and I've never seen that screw up in any browser.