html - div does not get centered using margin: auto in IE9 -
i trying centered in space left empty sidebar. how i'd like:
i managed make work ok browsers using margin: auto div in question, while setting overflow: hidden:
css
#header { height: 50px; background: #224444; color: #fff; } #container div { padding: 1em; } #content { max-width: 400px; margin: auto; background: #ddd; height: 300px; overflow: hidden; } #sidebar { float: right; width: 200px; background: #aaa; height: 300px; } html
<div id="container"> <div id="header"> page header </div> <div id="sidebar"> sidebar </div> <div id="content"> centered content (works everywhere on ie9) </div> </div> however, not work ie9. strange ie8 works ok!
i running out of ideas, thought maybe knows going on? trick seems work everywhere else.
note: please note content div should flexible in demo. available space decreases, should change size , squeeze in.
isolate centering floating
this affects ie9/10.
it works fine if floated element removed, or if width used instead of max-width. presence of floated content, combined use of margin:auto , max-width instead of width, appears confusing ie9+.
to fix this, put centered content in wrapper div, centering of content can separated floating of sidebar. in other words, happening layout-wise in single div, more ie9+ can handle. split #content div 2 separate divs.
#header { height: 50px; padding: 1em; background: #224444; color: #fff; } #content-wrapper { overflow: hidden; } #content { max-width: 400px; margin: auto; padding: 1em; background: #ddd; height: 300px; } #sidebar { float: right; width: 200px; padding: 1em; background: #aaa; height: 300px; }<div id="container"> <div id="header"> page header </div> <div id="sidebar"> sidebar </div> <div id="content-wrapper"> <div id="content"> centered content </div> </div> </div>this tested fine in ie7/8/9/10. on side note, because wrapper div added, padding: 1em; has added each element individually.
