CODEWITHSUNDEEP
htmlcss
Cihad Turhan
Cihad Turhan

Reputation: 2849

CSS value as mathematical expression

Is there anyway that I can write a css value as mathematical expression? Example:

div{
    height: 50% + 30px;
    width: 40em - 5px;
   }

If there is, it would be perfect.
PS: I don't want to do it with JS or JQuery.

Upvotes: 19

Views: 20208

Answers (4)

sandeep
sandeep

Reputation: 92863

You can achieve this with css3 calc(). Write like this:

div{
    width: 40%;
    width: -webkit-calc(40% - 5px);
    width: -moz-calc(40% - 5px);
    width: calc(40% - 5px);
    height:50%;
    height: -webkit-calc(50% + 50px);
    height: -moz-calc(50% + 50px);
    height: calc(50% + 50px);
    background: green;
    color: white;
    position:absolute;
}

Check this http://jsfiddle.net/3QUw6/

Check this discussion for more Is it possible to make a div 50px less than 100% in CSS3?

Upvotes: 28

roslav
roslav

Reputation: 480

Take a look at calc() function in CSS. Hopefully the support for this will increase in browsers.

Upvotes: 2

Wex
Wex

Reputation: 15715

Both padding and margin can be used to add to the dimensions of objects. I suggest you read up on the box model.

HTML: 

<div id="container">
    <div class="wrapper">
        <div>...</div>
    </div>
</div>

CSS: 

.wrapper { 
    width: 40em;
    height: 50%;
    padding: 15px 0; /* Top and bottom padding of 15px */ }

/* Block-level element will take up 100% of the 
  container width, minus {margin_right} + {marign_left} */
.wrapper > div { margin: 0 0 0 5px; }

Upvotes: 2

Billy Moon
Billy Moon

Reputation: 58619

You can not do this with CSS, but you could (and much more) with a CSS preprocessor, like LESS, SASS or my favorite Stylus. THe final output is plain old CSS, but it must be compiled first.

Upvotes: 3

Related Questions