Is numerical operation allowed in CSS? [duplicate]

Question

For instance, is width: 50% + 10px; legal in CSS?

If not, how to get around this issue? I'm working on float elements with multiple columns, width between each column being 10px. So I need an dynamic width calculation in order to get around screen size.

Answer 1

Nope. If you want math in CSS, look into SASS or LESS.

And if you're going to use LESS (or SASS), and you want evenly-spaced columns, Bootstrap responsive sounds like what you need.

Answer 2

You can try calc

selector{
    width: -moz-calc(50% + 10px);
    width: -webkit-calc(50% + 10px);
    width: calc(50% + 10px);
}

Answer 3

It sounds like what you really need is margin:

If not, how to get around this issue? I'm working on float elements with multiple columns, width between each column being 10px. So I need an dynamic width calculation in order to get around screen size.

 .colItem { float: left; margin-right: 10px; }

Your width probably shouldn't actually be 50% in that case, as two columns sitting next to each other will rune everything (50% + 50% + 20px margin > 100%). You might not actually want 10px, but 1% or something.

A better solution, probably, is to use padding with the box-sizing property:

.colItem 
{ 
    float: left; 
    width: 50%; 
    box-sizing: border-box;
    -moz-box-sizing:border-box; 
    padding-right: 10px; 
}
.colItem.last 
{ 
    padding-right: 0px; 
}

Answer 4

See this previous post: Is it possible to do mathematics inside CSS?

It is NOT possible directly from the CSS. But one can use, eg, LESS. Or you can use javascript to do it dynamic.

But since this is to calculate the screen, so pleace take a look at what resposive design is. There are already a number of frameworks for this. I would not say that one is better than the others here .. But take a look at http://designpin.co/5-responsive-web-design-frameworks/

And see what suits your needs.