All geek questions in one place

Div is not centered using field: auto in IE9

I am trying to get centered in a space that remains empty on the sidebar. Here's how I would like to look like this:

enter image description here

I really managed to make this work OK for most browsers using margin: auto for the div in question by setting overflow: hidden :

Here is the script

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 but on IE9) </div> </div>

However, it does not work with IE9. It is strange that IE8 is working fine!

I'm running out of ideas, so I thought maybe someone knows what is going on? The trick seems to work great everywhere.

NOTE Note that the content of the div should be flexible, as in the demo. As available space is reduced, it must resize and shrink.

+6
source share
4 answers

Isolate centering from floating

This affects IE9 / 10.

It works great if the floating point element is removed or width used instead of max-width . Having floating content combined with using margin:auto and max-width instead of width seems to confuse IE9 +.

To fix this, place the centered content in a div wrapper so that the centering of the content can be separated from the sidebar float. In other words, too much happens in the layout in one div, more than IE9 + can handle. So divide the div #content into two separate #content .

 #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 is tested in IE7 / 8/9/10. On the side of the note, since the wrapper div is added, now padding: 1em; must be added to each item separately.

+11
source

IE is notorious for not working without proper doctrines.

Try adding HTML5 alone

 <!DOCTYPE html>
+3
source

Floats are a complex business. Strictly speaking, they should only affect the embedded content that flows around them, so the fields act like floats even there.

Try this instead:

 #container {text-align:center} #content {display:inline-block;text-align:left}

This should lead to the fact that the content field will act as an inline element and, therefore, will be centered in space.

+1
source

As far as I remember, I always had problems with margin:0 auto , because I did not specify the width property. So every time you want to use margin:auto , you might need to write this:

 #content { max-width: 400px; margin: auto; background: #ddd; height: 300px; overflow: hidden; width:500px; }

or in percent:

 #content { max-width: 400px; margin: auto; background: #ddd; height: 300px; overflow: hidden; width:30%; }

EDIT If you want to create a flexible layout, take a look at bootstrap and fluid grids.

0
source

Source: https://habr.com/ru/post/943625/

More articles:


All Articles