CSS: calc(100%-50px) not working
Question by Compi | 2016-03-10 at 09:13
When I heard about the new CSS calc function for the first time, I really was excited! You can solve so much with that.
The greater was the disappointment when I tried to use it. I applied the width "width: calc(100%-50px)" to an element but it was not working at all! All was the same as before.
Although I am using the newest browser versions and it should work in Firefox since version 16 and in Chrome since version 26, it is working nothing. What am I doing wrong?
Related Topics
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Tutorial | 0 Comments
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Comment
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
Darken Background of a Website (Gray Out Effect)
Tutorial | 0 Comments
CSS: Colorize Table Rows Alternately only with CSS
Tutorial | 0 Comments
Mouseover buttons using CSS without reloading
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
I have also tried it out and it seems as the spaces between the operators are necessary. So, "calc(100%-50px)" is not working but when I am writing it as "calc(100% - 50px)" it is working.
Give it a try, I think that was the problem and it should work after correcting this.
2016-03-10 at 11:19
Indeed! That was the problem!
Okay, it is strange, but fortunately, it is working now. Maybe, the interpreter needs those spaces to order the parts of the calculations in the right away.
2016-03-10 at 13:06