Hi, my name is Daniel Brodin, and these are my notes

This is a collection of notes about web development. They are mostly made for me to remember things I find interesting, but also to express my thoughts and push myself in having to learn and go deeper in certain subjects.

If you have found your way here you are however welcome to stay and read as much as you like (not that I would be able to stop you anyway) :)

If you would like to contact me, here's how:

CSS3 calc() value

CSS3 has introduced a lot of cool things, but one that I really like and hope soon will get better support in all browsers is the calc() value. One of the better ways to use it would be with responsive designs using a lot of percent values which makes it harder to use px or em for padding and margins. 

.example1 { 
    width: 100%; 
    margin: 20px; 
    padding: 10px; 
}

The above example would cause some problems since it would make the element larger than 100% and you can’t predict what size the element will be, making it impossible with just CSS too know what percentage you can use with the margin and padding. The calc() value makes it easier thou 

.example2 { 
    width: calc( 100% - 40px - 20px ); 
    margin: 20px; 
    padding: 10px; 
}

That would make the elements total width 100% including margin and padding :)

You can see the code examples here.