Tuesday, September 10, 2013

CSS magic: calc()

I needed this so many times and had to use javascript instead. Well, my latest project doesn't need to be IE compatible according the client, so here we go:

Imagine two divs beside eachother. One is 200px, the other has to fill the rest of the space. Now I can do this:


 .left {  
      float: left;  
      width: 200px;  
 }  
 .right {  
      float: left;  
      width: calc(100% - 200px);  
 }