Kilian Valkhof

Front-end & user experience developer, Jedi.

Random CSS Thought: Math in CSS

CSS & HTML, 30 December 2006

After some debate with Prashant from Mintpages, we came up with a new utopia in CSS design. Now, this is just a random thought, but wouldn’t it be awesome to be able to use (simple) mathematics in your CSS? I’m not talking about “new techniques” or anything, just about closing your eyes and imagining all the things that would make CSS even more fun.

for example, say you want a 100% width design, but with a fixed width margin on both sides.

 
#page { 
	margin:0 10px; 
	width:100% - 20px; 
}  

That would be infinitely easier then the current extra div needed (the wrapper div to define the 100% width, and the actual content containing div defining the margins). It would make us developers be able to make even leaner code.

The wrapper div

Another example would be when you want a content div to be 100% height, but without counting the header. Right now, The “logical” way to do that is using a wrapper div with 100% height, and the header and content div inside it. With simple math in CSS, it would be:


#header {
	height:150px;
 	background:#fff url("pretty-header.png") no-repeat 0 0;
}
#content {
	height:100% - 150px;
	background:#fff url("content-bg.png") repeat-y top center;
} 

With this, you’d be able to get rid of the wrapper div, and give the same visual presentation with less code.

Boxes, borders

Or, simply use math to include the border of an element into it’s own width. Say you want two boxes that have a width of 50%, horizontally next to each other, but you want a 5px border around both of them as well, this would be the code:


#box1 {
	width:50% - 10px;
	border:5px solid #000;
	float:left;
}
#box2 {
	width:50% - 10px;
	border:5px solid #fff;
	float:left;
}  

That would save you some fake-border background images and additional div’s, am I right?

Utopia

I’m not certain how easily implementable this would be. You’d say it would be fairly easy, given that every browser already calculates the placement. But by looking at how CSS currently gets parsed, I imagine it would be something that’s not going to happen soon. Who knows, perhaps in CSS4?

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. But you’d probably still need margins. The “height: 100% – 150px” might actually make a div with 100% height…and then subtract 150px from the bottom. Which would still be pretty nifty.

    Gosh, I can’t think up random things in CSS. I’m jealous! :o

  2. i get what you are saying, but because of the flow of the page, the content div would be pushed down by the header div anyway, because the header div comes first in the source :)

  3. We should make a proposal so they add this to CSS3 :)

    > But you’d probably still need margins. The “height: 100% – 150px” might actually make a div with 100% height…and then subtract 150px from the bottom. Which would still be pretty nifty.

    You could probably tell the CSS where to cut the pixels off, height: “100% -150px top” :)

  4. […] When you combine this with another one of my Random CSS Thoughts: Math in CSS, things get really interesting: […]

  5. […] Math in CSS […]

  6. […] Math in CSS […]

  7. For the border example, don’t we already have the outline property to do this for us?

  8. […] but simple math could solve many problems in CSS. An article over on KilianValkof.com titled "Random CSS Thought: Math in CSS" presents just this idea and specific examples of how this could be […]

  9. […] but simple math could solve many problems in CSS. An article over on KilianValkof.com titled “Random CSS Thought: Math in CSS” presents just this idea and specific examples of how this could be […]

  10. […] but simple math could solve many problems in CSS. An article over on KilianValkof.com titled "Random CSS Thought: Math in CSS" presents just this idea and specific examples of how this could be […]

  11. […] but simple math could solve many problems in CSS. An article over on KilianValkof.com titled "Random CSS Thought: Math in CSS" presents just this idea and specific examples of how this could be […]

  12. […] but simple math could solve many problems in CSS. An article over on KilianValkof.com titled "Random CSS Thought: Math in CSS" presents just this idea and specific examples of how this could be […]

  13. […] go weak at the knees. Why is something this offensive even being considered when a one or two minor additions to the positioning model we already have would allow us to intuitively create layouts without […]

  14. YES – I was searching the web for this, and found this page.

    Math in CSS would be next-gen amazing. I’m a die-hard tables fan forced to be a DIV user both by my “it’s time” feelings as well as client-requests. Let’s just say the transformation has been less than pleasing, and some math in CSS would be amazing.

  15. Scott

    references in CSS would be better…

    #header {
    height:150px;
    background:#fff url(“pretty-header.png”) no-repeat 0 0;
    }
    #content {
    height:100% – #header.height;
    background:#fff url(“content-bg.png”) repeat-y top center;
    }

  16. Spiller

    Since I have worked more with programming than web-design, there were two things I wished for in CSS: math and constants.
    To continue your example with % and borders, lets image we can set the border with like this:
    define{ border_width: 5px; }

    and then we could define the element like this:
    width:50% – border_width * 2;
    border:border_width solid #000;
    float:left;

    If we wanted to change the border thickness we could just change border_width and both values are updated.
    Since I have a hard time with choosing good colors I will probably need to change it again later on… So setting these as constants would speed up testing since I otherwise would need to change it several places in the style sheet…
    I also like keeping things like the spacing between elements somewhat constant throughout the design, setting this as a constant would be nice.

    The reason I would like math and constants in CSS is also to make it easier to understand.
    If we used the previous example, but having a fixed width of 150px instead of 50% we would normally say:
    width:140px; /* 150px – 10px */

    but wouldn’t this be much easier to understand:
    define{
    total_width = 150px;
    border = 5px;
    }
    width: total_width – border *2;
    I have caught myself thinking “Why did I write that number?” when editing in a part of the style sheet I hadn’t touched for a while. If it had been defined as above, such cases would be less likely.
    Of course, it adds a little bit of extra weight to the code, but if you are worried about that you could always make a small program to replace the constants and do the math where possible.

    I started learning HTML and CSS a half year ago when my school forced me to do it, but it turned out to be more interesting than I thought. So I’m still quite new to this though…

  17. Max

    The idea of implementing mathematical functions in CSS is something that would make life as a web developer easier. But still, I would imagine that you’d still have to use javascript to actually make the equations. The only way out today would be to skip hard-coded css files and work with the css properties in javascript instead. If you use libraries, such as jquery, the selectors still would be pretty much the same and more properties would be available to control through the “javascript-css” such as animations and effects on events, such as clicks,toggles, focus.

  18. Any updates on the status of this? I just happened to try this while goofing around and it appears to actually work exactly as I would expect in every recent browser. Still doesn’t validate with W3C though. Anyone have any insight?

  19. http://hacks.mozilla.org/2010/06/css3-calc/, there is always the CSS3 calc() method, that works in firefox 4 via -moz-calc and IE9 via calc, but from what I here neither are perfect solutions.

  20. Anonymous

    @Thomas Barrasso:

    You know that CSS3 had not even been proposed when this was posted right?
    Also Firefox’s “calc()” [-moz-calc() right now] doesn’t work for widths yet …which is the main thing people want this for.
    Also IE9 is in “Developer Platform Preview” and is such a slimmed down version that it is almost completely unusable for anything other than looking at it and saying “OK, I can see that it supports this …”

    So hopefully CSS3’s calc() will get completed in Firefox soon.
    then we can all be happy ☺

  21. Garet Claborn

    There is one way I know of to use math in css via using a php file as the stylesheet! :)

    Here is a simple example:

    <? $size = 150; $spacer=$40; ?>

    div.myClass
    {
    position: absolute;
    left: 20px;
    width: <? echo $size ?>;
    }

    div.MyClassWhichIsRelativeToMyClass
    {
    position: absolute;
    width: <? echo $size ?>;
    left: <? echo 20 + $size + $spacer ?>;
    }

    Alternatively, you can also work with .htaccess to have server look for php in a .css file. Learning this technique was very helpful to me!