current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

i came across this page CSS LINK i could't help but love the idea of that to calculate the outcome of different units... however i tried this :

$('selector').css({'width':'calc(100%-20px)'});

but it doesn't work... anyone has any ideas how this works , or why doesn't this work?

share|improve this question
add comment

4 Answers

up vote 4 down vote accepted

jQuery does not support the calc() value, and neither does any of the current browsers.

See a comparison here: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

In your example, yo can just use margins on the inner element instead:

<div class="parent"><div class="elem"></div></div>

.parent{
    width:100%;
    background:green;
}
.elem{
    margin: 0 10px;
    background:blue;
}

This way, .elem will be 100% - 20px wide.

share|improve this answer
 
thanks man ... I think it should be illegal for a browser not fully implimented 100% lol this is nightttttmare waste of our time trying to fix all the mis-implimented borwsers –  Val Feb 8 '10 at 22:34
 
no it's not about the browser, it's about the CSS version. The browsers are fine, but they still don't fully support CSS3 –  Omar Abid Feb 8 '10 at 22:44
 
thats what i mean they should not put css3 out until every browser fully supports it... because it will just add another thing we have to start using work arounds for...or hacks –  Val Feb 8 '10 at 22:59
 
They haven't “put CSS3 out”. You are looking at working drafts for the standardisation process. –  bobince Feb 8 '10 at 22:59
 
oh that makes more sense :) thanks –  Val Feb 8 '10 at 23:08
show 1 more comment
up vote 2 down vote

Some parts of CSS3 are well-supported. Other parts aren't. That's why it has been split into modules, which are in various stages of agreement and implementation. We are a long, long way from even having a complete range of CSS3 specifications, let alone widespread browser support.

So CSS Level 3 Selectors is the most stable specification, having made Recommendation and been implemented by quite a few browsers and other tools (though still, it will take a while for all mainstream browsers to support it well). Several of the other PRs and CRs have enough support in the latest browsers to be of interest.

But “CSS3 Values and Units” is still only an early-stage Working Draft, and is very likely to change significantly before reaching Recommendation. In fact given that no browsers have implemented calc()since the draft was begun years ago, it looks unlikely at this point that this feature will become standard. If you want to stay within the realm of well-supported stuff, you need to stick with CSS 2.1.

In the meantime, saying things like 100%-20px has to be done with nested elements, margins and padding.

share|improve this answer
 
i have tried many work arounds but it is doing my heading because almost everytime something will mess it up... i could convert the width or height into percentage but css2.1 doesn't allow decimals in percentages which doesn't always look all that pretty lol –  Val Feb 8 '10 at 23:07
 
CSS 2.1 does allow decimal places in percentages. It doesn't entirely solve relative calculation or pixel-rounding problems though. –  bobince Feb 8 '10 at 23:55
add comment
up vote 1 down vote

CSS3 is not much supported by current browsers.

share|improve this answer
 
i thought that could be one of the reasons... so that means that css2 does not support the calc() function ? –  Val Feb 8 '10 at 22:23
 
Yes exactly; that's new with CSS3. In fact CSS3 is like a futuristic wonderland. Check out the CSS3 support for print media for example. –  Pointy Feb 8 '10 at 22:30
add comment
up vote 0 down vote

jQuery supports the calc(). I have used this so many times:

  1. $(".content-section").css('width','calc('+contentSectionWidth+'% - 15px)');

  2. $(".content-section").css('width','calc('100% - 15px)');

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.