user1820686 user1820686 - 2 months ago 16
HTML Question

Css calc() behavior in IE

My purpose is to put inner

div
in the middle of container.

The example in
fiddle:

The main problem is that inner div is shifted right in IE (Firefox and Chrome shows it fine) because of using css
calc()
rule. If I uncomment constant width in example above
width: 156px
, it works.

But it doesn't with
calc()
. Is there any way to fix it for IE?

P.S. as I know IE8 and lower doesn't support
calc()
, I was trying it in IE9.

Answer

Try this new fiddle, there where a couple of errors in your CSS. Here ya go:

http://jsfiddle.net/tuwd3tqg/1/


First off though, you where using position: absolute, and I don't know why. Second, you where using top and right, for those you must use position: relative. Third you where using right, which I changed to margin-right, and the items have to be float: right to use right.


EDIT

If you would like text aligned in the center add the following property to your wrapper text-align: center. Here is an updated fiddle: http://jsfiddle.net/tuwd3tqg/2/

Comments