Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to add and subtract values in CSS?

Tags:

css

margin

height

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!

like image 928
Brad Avatar asked Dec 27 '11 10:12

Brad


People also ask

Can I do subtraction in CSS?

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 (/).

How does CSS calculate padding?

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.


1 Answers

Yes. CSS3 has the calc() function. This works in the current versions of most browsers (http://caniuse.com/calc).

height: calc( 100% + 250px );

Demo: jsFiddle

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:

enter image description here

like image 172
ThinkingStiff Avatar answered Oct 21 '22 03:10

ThinkingStiff