IE 11 does not recenter DIV

Question

I stumbled upon a bizarre behavior of IE (11) using the code below (adapted from this answer).

The centered div does not automatically adjust its position when resizing the browser window.
It works fine in Google Chrome (tested with v31 and v34 canary) and Firefox 26.

→ jsFiddle

<div id="outerWrapper">
    <div id="innerWrapper">
        Helllo World!<br />
        Longer text, longer text, longer text.
        yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy.
    </div>
</div>

#outerWrapper {
    display:inline-block;
    position:relative;
    left:50%;
}
#innerWrapper {
    position:relative;
    left:-50%;
}

My system:

Windows 8.1 Pro 64-bit
IE 11 (I also tested the problem with the IE 7, 8 and 9 modes)

@Alohci Well, I thought I had overlooked something. Additionally, there is a chance that someone knows a workaround and stumbles upon this question. — ComFreek, Dec 29 '13 at 22:36
Well.. one very bad hack would be to redraw the page with javascript when window is resized. — cen, Dec 29 '13 at 23:26
I'd say try to use floats instead of relative positioning. I think this SO question can give better light to it: http://stackoverflow.com/questions/2317219/why-float-is-better-than-positionrelative-and-absolute-while-we-can-make-layout and I adjusted your fiddle, so you can try it with floats: http://jsfiddle.net/DcLFz/3/ if all of this works out, I will post it as an answer and go a bit more in depth with it :) — BuddhistBeast, Dec 29 '13 at 23:56
@BuddhistBeast Thanks for the link! However, your jsFiddle does not work for me in any browser. It always displays the text left-aligned. — ComFreek, Dec 30 '13 at 09:18
@cen Out of curiosity, how would one go about doing this? I've already tried [resetting the given CSS properties](http://jsfiddle.net/DcLFz/5/), but none of my attempts worked. — ComFreek, Dec 30 '13 at 09:25
@ComFreek where do you want the text to be displayed? Centered? Justified? — BuddhistBeast, Dec 30 '13 at 17:25
@BuddhistBeast The text is supposed to be contained in a centered box whose width should be as small as possible ("shrink-to-fit"). — ComFreek, Dec 30 '13 at 18:32

score 0 · Answer 1 · answered Dec 30 '13 at 01:41

0

Actually, ive changed your code a wee bit so that it does.

#outerWrapper {
    display:inline-block;
    position:absolute;
    left:50%;
    width:300px;
    margin-left:-150px;

}
#innerWrapper {
    position:relative;

}

this auto centers it no matter what.(and i tested on ie11)

EDIT*** also, you can change the width if youd like. i just added a random smaller width so i could see it better on my small mbp lol.

Cheers

answered Dec 30 '13 at 01:41

somdow

6,268
10
40
58

Thanks for the answer, however, I don't want to be restricted to specify a fixed width. It should be as wide as the contents forces it to be. – ComFreek Dec 30 '13 at 09:20

score 0 · Answer 2 · edited Jan 01 '14 at 16:50

0

The difference is actually the default font used by IE and Chrome. If you define the font family and size both browsers render the markup the same. This is why many use a CSS reset, there are subtle differences between each browser's default stylesheet. The reset normalizes every browser for your application so you have a consistent base to work from. JSFiddle does not do this by default.

http://jsfiddle.net/docluv/DcLFz/6/

#outerWrapper {
  display:inline-block;
  position:relative;
  left:50%;
  background-color:#990000;
  height:200px;
}
#innerWrapper {
  position:relative;
  left:-50%;
  background-color:#009900;
  font-family:"arial";
  font-size:10pt;
}

edited Jan 01 '14 at 16:50

ComFreek

29,044
18
104
156

answered Jan 01 '14 at 13:25

Chris Love

3,740
1
19
16

Thanks for the answer, but I think you misunderstood my problem. It's not about the font, it is the whole text box which does not reposition on resizing the browser. (It does though if you reload after having resized the window!) – ComFreek Jan 01 '14 at 16:52
no I understood the question. The issue is you set no fixed dimensions of your box. Therefor it takes the shape of its content. IE & Chrome have different default font rules. Chrome's default font is smaller than IE's. Therefor the box was not sizing exactly the same. Once I reset the font the boxes look and behave the same in all browsers. – Chris Love Jan 01 '14 at 18:28
Your jsFiddle does not work - at least for me. Resizing does not trigger a change in (horizontal) position in IE. – ComFreek Jan 01 '14 at 18:43

IE 11 does not recenter DIV

2 Answers2