15

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!

Brad
  • 241
  • 2
  • 5
  • 12
  • 2
    There are CSS preprocessors like LESS or SASS that add such feature, but I'm not really sure if that's what you are asking. – Álvaro González Dec 27 '11 at 10:08
  • I think I'm just looking for a way to combine pixels and percentage in the same CSS statement, if it's even possible. – Brad Dec 27 '11 at 10:11
  • 1
    Check this question http://stackoverflow.com/questions/527861/value-calculation-for-css May be you can use Javascript... – Nalaka526 Dec 27 '11 at 10:13

3 Answers3

35

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

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
0

Sass and less have similar such features too what you need, but I think what your asking for would have to be done with javascript or jquery to do your calculations.

http://api.jquery.com/height/

Dominic Green
  • 10,142
  • 4
  • 30
  • 34
0

The solution for this problem is "Faux Columns", but you need to change your layout a bit for this.

Burntime
  • 2,334
  • 2
  • 15
  • 20
  • This is good but it would require using Photoshop which is not really up my alley :p – Brad Dec 27 '11 at 10:20
  • Just because a skill isn't "up your alley" doesn't stop it being a good solution. Basic image editing is quite a core web developer skill – Gareth Dec 27 '11 at 10:33
  • 1
    Well it's also not what I was asking. I was wondering if CSS has any built-in capability to add and subtract values of different types. It is a good solution though. – Brad Dec 27 '11 at 10:43
  • Well u ask for http://www.w3.org/TR/css3-values/#calc. But this is the wrong approach. – Burntime Dec 27 '11 at 10:48