Rectangle 27 106

box-sizing: border-box
calc(100% - 500px)

If I have the following markup:

Instead of doing this: (Assuming that the sidebar is 300px wide)

.content {
  width: calc(100% - 300px);
}
.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html,
body,
div {
  height: 100%;
}
.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: wheat;
}
<div class="sideBar">sideBar</div>
<div class="content">content</div>

PS: I won't work in IE 5.5 (hahahaha) , but it will work in IE8+ , all mobile, and all modern browsers (caniuse)

I just found this post from Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressions: (bold is mine)

One of my favorite use-cases that border-box solves well is columns. I might want to divide up my grid with 50% or 20% columns, but want to add padding via px or em. Without CSSs upcoming calc() this is impossible unless you use border-box.

NB: The above technique does indeed look the same as would a corresponding calc() statement. There is a difference though. When using a calc() rule the value of the width of the content div will actually be 100% - width of fixed div, however with the above technique, the actual width of the content div is the full 100% width, yet it has the appearance of 'filling up' the remaining width. (which is probably good enough for want most people need here)

That said, if it is important that the content div's width is actually 100% - fixed div width then a different technique - which makes use of block formatting contexts - may be used (see here and here for the gory details):

1) float the fixed width div

overflow:hidden
overflow:auto

+1, saved me lots of time

-moz-box-sizing: border-box;
box-sizing: border-box;

@buffer - No, because the default box-model uses box-sizing-content-box which means that if you add padding - the width of your element increases. With box-sizing:border-box the padding is an inner padding and the width of the element remains according to what you set it to be.

How would this change if it was with height instead of width?

Knew it, but didn't think of it. Old android is still common, supports box sizing but not calc. a simple absolute and padding saves the day.

css3 - CSS Calc alternative - Stack Overflow

css css3 css-calc
Rectangle 27 106

box-sizing: border-box
calc(100% - 500px)

If I have the following markup:

Instead of doing this: (Assuming that the sidebar is 300px wide)

.content {
  width: calc(100% - 300px);
}
.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html,
body,
div {
  height: 100%;
}
.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: wheat;
}
<div class="sideBar">sideBar</div>
<div class="content">content</div>

PS: I won't work in IE 5.5 (hahahaha) , but it will work in IE8+ , all mobile, and all modern browsers (caniuse)

I just found this post from Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressions: (bold is mine)

One of my favorite use-cases that border-box solves well is columns. I might want to divide up my grid with 50% or 20% columns, but want to add padding via px or em. Without CSSs upcoming calc() this is impossible unless you use border-box.

NB: The above technique does indeed look the same as would a corresponding calc() statement. There is a difference though. When using a calc() rule the value of the width of the content div will actually be 100% - width of fixed div, however with the above technique, the actual width of the content div is the full 100% width, yet it has the appearance of 'filling up' the remaining width. (which is probably good enough for want most people need here)

That said, if it is important that the content div's width is actually 100% - fixed div width then a different technique - which makes use of block formatting contexts - may be used (see here and here for the gory details):

1) float the fixed width div

overflow:hidden
overflow:auto

+1, saved me lots of time

-moz-box-sizing: border-box;
box-sizing: border-box;

@buffer - No, because the default box-model uses box-sizing-content-box which means that if you add padding - the width of your element increases. With box-sizing:border-box the padding is an inner padding and the width of the element remains according to what you set it to be.

How would this change if it was with height instead of width?

Knew it, but didn't think of it. Old android is still common, supports box sizing but not calc. a simple absolute and padding saves the day.

css3 - CSS Calc alternative - Stack Overflow

css css3 css-calc
Rectangle 27 30

Just have a fallback before the calc will do the trick.

width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

css3 - CSS Calc alternative - Stack Overflow

css css3 css-calc
Rectangle 27 30

Just have a fallback before the calc will do the trick.

width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

css3 - CSS Calc alternative - Stack Overflow

css css3 css-calc
Rectangle 27 15

.content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}

Isn't this the same thing Danield proposed in his answer?

No, it isn't.. If you have an image of 500px and if you want to display a flanked text of (100%-500px), the only way I've found to show them correctly in IE8 is to add a negative margin to text. Otherwise text is displayed as a block.

css3 - CSS Calc alternative - Stack Overflow

css css3 css-calc
Rectangle 27 15

.content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}

Isn't this the same thing Danield proposed in his answer?

No, it isn't.. If you have an image of 500px and if you want to display a flanked text of (100%-500px), the only way I've found to show them correctly in IE8 is to add a negative margin to text. Otherwise text is displayed as a block.

css3 - CSS Calc alternative - Stack Overflow

css css3 css-calc
Rectangle 27 92

If you have a browser that doesn't support the calc expression, it's not hard to mimic with jQuery:

$('#yourEl').css('width', '100%').css('width', '-=100px');

It's much easier to let jQuery handle the relative calculation than doing it yourself.

$(window).resize(function() { /* put the jquery calc code here */ });

This approach has a small problem. When I change the width of page, the width of #yourEl does not change, it is constant.

Just incase other people are anal about formatting, there cannot be a space between '=' and the value. So -= 100px will not work, it must be -=100px.

css width: calc(100% -100px); alternative using jquery - Stack Overflo...

jquery css
Rectangle 27 16

div.thediv {
  width: auto;
  margin-right:100px;
}
$(window).resize(function(){
  $('.thediv').each(function(){
    $(this).css('width', $(this).parent().width()-100);
  })
});
position:absolute; top:0; left:0;

@sam: If that's the case, just add right: 100px...

<script type="text/javascript"> 		$(window).resize(){   $('#supersized').each(function(){     $(this).css('width', $(this).parent().width()-100);   }) }         </script>
width:90%; margin-right:-100px;

css width: calc(100% -100px); alternative using jquery - Stack Overflo...

jquery css
Rectangle 27 16

var width=  $('#elm').width();

    $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });

css width: calc(100% -100px); alternative using jquery - Stack Overflo...

jquery css
Rectangle 27 6

I spent a while searching for this when I first discovered about LESS, and I'm afraid it's impossible. LESS doesn't include a rendering engine and therefore has no way to work out exactly how wide a percentage of a parent element is going to be. Especially because quite often that parent element might be of variable width.

If the parent is of fixed width you can of course use LESS to calculate the pixels for you:

@containerWidth: 500px;
.container {width: @containerWidth;}
.child {width: @containerWidth / 5;}

css3 - Alternatives to CSS Calc()? Can LESS or SASS do percent to pixe...

css css3 sass less stylus
Rectangle 27 1

animate()
$("#divid").animate({'width':perc+'%'});
$('#button-sidebar').animate({width: calc(50% + 20px)},400);

I don't think that you can use jQuery to animate calc Css variables. You could animate both 'width', '100%' and 'width', '-=100px' in the same action and it will do what you want.

css width: calc(100% -100px); alternative using jquery - Stack Overflo...

jquery css
Rectangle 27 1

Its not that hard to replicate in javascript :-) , though it will only work for width and height the best but you can expand it as per your expectations :-)

function calcShim(element,property,expression){
    var calculated = 0;
    var freed_expression = expression.replace(/ /gi,'').replace("(","").replace(")","");
    // Remove all the ( ) and spaces 
    // Now find the parts 
    var parts = freed_expression.split(/[\*+-\/]/gi);

    var units = {
        'px':function(quantity){
            var part = 0;
            part = parseFloat(quantity,10);
            return part;
        },
        '%':function(quantity){
            var part = 0,
            parentQuantity = parseFloat(element.parent().css(property));
            part = parentQuantity * ((parseFloat(quantity,10))/100);
            return part;
        } // you can always add more units here.
    }

    for( var i = 0; i < parts.length; i++ ){
        for( var unit in units ){
            if( parts[i].indexOf(unit) != -1 ){
               // replace the expression by calculated part.
               expression = expression.replace(parts[i],units[unit](parts[i]));
               break;
            }
        }
    }
    // And now compute it. though eval is evil but in some cases its a good friend.
    // Though i wish there was math. calc
    element.css(property,eval(expression));
}

It needs a usage example.

css width: calc(100% -100px); alternative using jquery - Stack Overflo...

jquery css
Rectangle 27 1

If you want to use calc in your CSS file use a polyfill like PolyCalc. Should be light enough to work on mobile browsers (e.g. below iOS 6 and below Android 4.4 phones).

css width: calc(100% -100px); alternative using jquery - Stack Overflo...

jquery css
Rectangle 27 1116

body
    height: calc(100% - #{$body_padding})
body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

css3 - Sass Variable in CSS calc() function - Stack Overflow

css css3 sass css-calc
Rectangle 27 427

body { width: calc(~"100% - 250px - 1.5em"); }

In less.js 1.4.0 we will have a strictMaths option which requires all less calculations to be within brackets, so the calc will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.

Note that if you're compiling less with twitter's recess it ignores this escaping. At least at the time of writing this comment.

I just tried calc(100% - 50px) in less.css 1.4.0 and the result was calc(50%). The awesome ~"..." trick continues to work, but I am confused by the "out-of-the-box" statement, which makes me think the above would work. Luke, how does support for calc change in Less 1.4.0? Thanks!

For future readers, you can also escape just the operator, enabling you to use variables as well. Example: calc(@somePercent ~"-" @someLength)

Instead of less miscalculating this or throwing an error why can it not realize what the user is trying to do and leave it alone? Obviously a percentage and a pixel value cannot be calculated together in less.

css - Less Aggressive Compilation with CSS3 calc - Stack Overflow

css css3 compilation less css-calc
Rectangle 27 423

body { width: calc(~"100% - 250px - 1.5em"); }

In less.js 1.4.0 we will have a strictMaths option which requires all less calculations to be within brackets, so the calc will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.

Note that if you're compiling less with twitter's recess it ignores this escaping. At least at the time of writing this comment.

I just tried calc(100% - 50px) in less.css 1.4.0 and the result was calc(50%). The awesome ~"..." trick continues to work, but I am confused by the "out-of-the-box" statement, which makes me think the above would work. Luke, how does support for calc change in Less 1.4.0? Thanks!

For future readers, you can also escape just the operator, enabling you to use variables as well. Example: calc(@somePercent ~"-" @someLength)

Instead of less miscalculating this or throwing an error why can it not realize what the user is trying to do and leave it alone? Obviously a percentage and a pixel value cannot be calculated together in less.

css - Less Aggressive Compilation with CSS3 calc - Stack Overflow

css css3 compilation less css-calc
Rectangle 27 56

Apart from using an escaped value as described in my other answer, it is also possible to fix this issue by enabling the Strict Math setting.

width: calc(100% - 200px);

Would work as expected with the strict math option enabled.

However, note that Strict Math is applied globally, not only inside calc(). That means, if you have:

font-size: 12px + 2px;

The math will no longer be processed by Less -- it will output font-size: 12px + 2px which is, obviously, invalid CSS. You'd have to wrap all maths that should be processed by Less in (previously unnecessary) parentheses:

font-size: (12px + 2px);

Strict Math is a nice option to consider when starting a new project, otherwise you'd possibly have to rewrite a good part of the code base. For the most common use cases, the escaped string approach described in the other answer is more suitable.

To enable strict math in for example gulp, pass the following option: less({strictMath: true})

css3 - Disable LESS-CSS Overwriting calc() - Stack Overflow

css css3 less css-calc
Rectangle 27 56

Apart from using an escaped value as described in my other answer, it is also possible to fix this issue by enabling the Strict Math setting.

width: calc(100% - 200px);

Would work as expected with the strict math option enabled.

However, note that Strict Math is applied globally, not only inside calc(). That means, if you have:

font-size: 12px + 2px;

The math will no longer be processed by Less -- it will output font-size: 12px + 2px which is, obviously, invalid CSS. You'd have to wrap all maths that should be processed by Less in (previously unnecessary) parentheses:

font-size: (12px + 2px);

Strict Math is a nice option to consider when starting a new project, otherwise you'd possibly have to rewrite a good part of the code base. For the most common use cases, the escaped string approach described in the other answer is more suitable.

To enable strict math in for example gulp, pass the following option: less({strictMath: true})

css3 - Disable LESS-CSS Overwriting calc() - Stack Overflow

css css3 less css-calc
Rectangle 27 34

A very common usecase of calc is take 100% width and adding some margin around the element.

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
-o-calc-

css - Less Aggressive Compilation with CSS3 calc - Stack Overflow

css css3 compilation less css-calc
Rectangle 27 34

A very common usecase of calc is take 100% width and adding some margin around the element.

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
-o-calc-

css - Less Aggressive Compilation with CSS3 calc - Stack Overflow

css css3 compilation less css-calc