CSS: 100% width minus fixed number of pixels
Question by Compi | Last update on 2022-10-31 | Created on 2016-03-09
I have a DIV box in HTML which width should depend on the width of the parent element. However, not the entire width (100%) but a little smaller.
So, I need a CSS rule such as "width: 100% - 50px", what is not working of course. Unfortunately, I cannot work with 80% or something like that, because the margin should always have a fixed width.
Is there any possibility to solve this using CSS?
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
Rewrite Text Files with a fixed Line Length
Tutorial | 0 Comments
Darken Background of a Website (Gray Out Effect)
Tutorial | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 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.
CSS3 is providing the new CSS function calc() exactly for this purpose. Using calc() you are able to calculate lengths using equations.
In your case, you can specify the following:
.mydiv { width: calc(100% - 50px); }All new and current browsers should support and understand that.
If you want, you can specify a fallback width for the older browsers before the calc-width, for example: .mydiv {width: 80%; width: calc(100% - 50px);}
Last update on 2022-10-31 | Created on 2016-03-09