CODEWITHSUNDEEP
css
Meshaal
Meshaal

Reputation: 704

Using calc() for positioning

I have a relative-positioned div, and want to align it using CSS3's lovely calc(). It's not working.

Fiddle.

Apologies for messy code, just mocking up a comparable design to avoid shoving the more complex code surrounding my actual project in your faces.

For some reason, this is throwing an invalid property value error, and I can't work out why. Is there any workaround?

Upvotes: 1

Views: 121

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

A simple test you can do is:

left: calc(100% + 1px);

enter image description here

if you see it left 100% and just a tiny 1px space.... :D

https://developer.mozilla.org/en-US/docs/Web/CSS/calc (12/2013) says it all:

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Upvotes: 0

Zyad Sherif
Zyad Sherif

Reputation: 929

It's working on my browser, but anyways try using the prefixed versions just to make sure, -webkit-calc() and -moz-calc()

Upvotes: 2

Related Questions