0

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.

dippas
  • 58,591
  • 15
  • 114
  • 126
user1820686
  • 2,008
  • 5
  • 25
  • 44
  • It would help if we knew what this was *supposed9 to look like. – Paulie_D Aug 27 '15 at 12:07
  • @Paulie_D, as I wrote above, other browsers displays it correctly (just try to open this fiddle in Chrome). The main target is to display text in p tag right aligned horizontally and in the middle vertically – user1820686 Aug 27 '15 at 12:29

2 Answers2

1

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/

Michael Jones
  • 2,222
  • 18
  • 32
  • Thanks, it definitely helps! I just was at a loss because Chrome and Firefox handles that another (correct as I guess) way, so I consideredthe problem is in calc() – user1820686 Aug 27 '15 at 12:47
0

give your class 

.column {
   text-align: center;
}
Alex Char
  • 32,879
  • 9
  • 49
  • 70
Neez
  • 11
  • 1