Menu
In CSS, how can I do something like this:
width: 100% - 100px; I guess this is fairly simple but it is a bit hard to find examples showing that.
689
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.
if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border.
Using width, max-width and margin: auto; As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container.
Could you nest a div with margin-left: 50px; and margin-right: 50px; inside a <div> with width: 100%;?
25
Modern browsers now support the:
width: calc(100% - 100px); To see the list of supported browser versions checkout: Can I use calc() as CSS unit value?
There is a jQuery fallback: css width: calc(100% -100px); alternative using jquery
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
