I have a div that I am positioning with a negative margin, but I'd like it to extend all the way down to the bottom of its container div so I can use a border that doesn't just end randomly. If you look at http://kineticaid.com/k/home.php you will understand what I mean. I can't just extend its height in pixels because the container div's height changes dynamically with pages. What I want to do is something like this:
#rightcol {
float: right;
width: 225px;
height: 100% + 250px;
margin: -325px -25px 0 0;
}
Basically I'm asking if you can add and subtract in CSS. Thanks!
calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/).
Any margin or padding that has been specified as a percentage is calculated based on the width of the containing element. This means that padding of 5% will be equal to 5px when the parent element is 100px wide and it will be equal to 50px when the parent element is 1000px wide.
Yes. CSS3 has the calc()
function. This works in the current versions of most browsers (http://caniuse.com/calc).
height: calc( 100% + 250px );
Demo:
HTML:
<div id="one"></div>
<div id="two"></div>
CSS:
div {
border: 1px solid red;
height: 100px;
}
#one {
width: calc(50% + 20px);
}
#two {
width: 50%;
}
Output:
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