Most of us have come across a piece of CSS code for which we thought, “This would be much easier if I could just subtract X number of pixels,” or “This solution would be easier if I could just add X% onto this DIV.”
Without this simple math for CSS, most of us have found workarounds to many of these problems. But by implementing simple mathematical functions in CSS, we can eliminate extra code and make our thought process easier.
A rough example could be something like below:
- .element {
- width: 100%-150px;
- }
Example of the Centered Layout
This technique would benefit fluid layouts or layouts that need to be aligned relative to the user’s screen size. It would also help layouts that have centering, either vertically or horizontally.
