100% Div width minus a fixed amount of pixels

The calc() function in CSS saved me today. If you need a table width to be 100% of a relative width container subtracted by a set number of pixels, you can do that like this.

.calculated-width {
    width: calc(100% - 100px);
}​

Some older (webkit/mozilla) browsers may also require you to use vendor prefixes so it will work on those user agents as well.

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

This is cool, but to be honest, calc() is just one of the many functions that are available in CSS3.

Other functions

You can also use the attr() function to display any attribute value from the currently selected element. This could have numerous valuable use cases.

a:after {
  content: " (" attr(href) ")";
}

Lastly, CSS3 also added the ability to create custom variables in CSS (declared by two dashes). It should be noted however that these do not work in Internet Explorer 11.

html {
  --myvariable: #F00;  
}

#div1 {
  background-color: var(--myvariable);
}
Mike K.

Mike is a front end web developer and marketing specialist. He enjoys writing about the internet, technology, finance, investing and health related topics.