Calc() is a great css property!

Discussion in 'Web Design' started by lionel.web, Feb 21, 2015.

to remove all ads.
  1. lionel.web

    lionel.web Member

    Messages:
    95
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Yes, I was bemoaning the loss of CSS expression from IE a couple of days ago.
     
  3. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Code:
    width: calc(100% * 1 / 2 - 20px);
    an interesting concept. box-sizing I've found has solved a lot of these maths problems for me, but it'll be worth giving it a shot.
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I've been using calc quite a bit the last several projects. Browser support is pretty deep too.

    I use border-box for everything, but it doesn't include margins, so calc helps clean that up as well.
     
  5. lionel.web

    lionel.web Member

    Messages:
    95
    Is it necessary to use box-sizing:border-box for everything in a page?

    I have found it and its use a while ago, and i use it sometimes only and when it helps me for measuring elements.
    What is the big difference to size an element with it's padding and border or not, for example.
    Why is box-sizing border box, so good?
     
  6. Brian Angel

    Brian Angel Member

    Messages:
    248

    http://www.paulirish.com/2012/box-sizing-border-box-ftw/
     
  7. lionel.web

    lionel.web Member

    Messages:
    95
    Thanks for sharing that link.
    I checked it, i'll use it on my forward projects.

    Thanks for the info!
     
  8. Brian Angel

    Brian Angel Member

    Messages:
    248
    The only downside Ive come across is, I did a site that had a slide out side nav with a full screen slide show. On that I had to over ride it because it caused some oddness. Just a heads up.
     
    Last edited: Mar 28, 2015
  9. Robert-B

    Robert-B Member

    Messages:
    70
    This should work well with Responsive Design. Thanks for sharing it.
     
  10. K2BSolutions

    K2BSolutions New Member

    Messages:
    4
    thanks for sharing the information.its is useful to the responsive web design.
     

Share This Page