Css Calc Alternative

CSS Calc alternative

Almost always box-sizing: border-box can replace a calc rule such as calc(100% - 500px) used for layout.

For example:

If I have the following markup:

<div class="sideBar">sideBar</div>
<div class="content">content</div>

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

.content {
  width: calc(100% - 300px);
}

Do this:

.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>

Alternative to calc()

First it is important to note that you should always specify the properties with vendor prefixes before the unprefixed properties :

.fullwidthelement {
   left: -20px;
   width: -webkit-calc(100% + 40px);
   width: calc(100% + 40px);
}

Second, if you check canIuse (click on "show all") you will see that safari 5.1 doesn't support the calc() function.

Cross-browser alternative to CSS calc()

You don’t need to “abuse” calc for problems for which solutions already exist – and in this case, that solution is called box-sizing:border-box.

And according to http://caniuse.com/#feat=css3-boxsizing, IE 8 and Opera Mini 8 support it.

(Both won’t play along with the vh unit though – but that problem you would have with calc as well. Whether you’ll be able to substitute 100% for it, depends on the rest of the layout.)

CSS - Calc alternative

is this you want Demo

.title {
    margin:0 10px 0 40px;
}

Calc() alternative to fixed side bar with content?

I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.

Snippet

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}.parent .fluid {background-color: #f99;}

<div class="parent">  <div class="fixed">Fixed</div>  <div class="fluid">Fluid</div></div>
<div class="parent">  <div class="fixed">Fixed</div>  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div></div>

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

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.

CSS3 equivalent to width:calc(100% - 10px)

If you change the box model rendering to box-sizing: borderbox then the padding will be included in the total width instead of being added to it.
With this example I am assuming you are adding the class to the wrapping elements.

.fit { 
    width:100%
    padding-right:10px
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 

}

Browser support is very good; all modern browsers. Only you will need a polyfill for IE7 and under.

For more background info: paulirish.com/2012/box-sizing-border-box-ftw/

EDIT:

This is a solution that I believe completely meets your brief, please see fiddle: http://jsfiddle.net/David_Knowles/UUPF2/

.fit { 
    width:100%
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 
}

td {
    padding-right: 10px;
}