CSS Calc Function

 

Have you ever had a problem getting a div to center?   There are times that for some reason the margin: auto;  just doesn’t work.

Its situations like this that get old timers like me poking around Google where we discover new and cool things.   (the whole having a job, and being expected to produce results thing can make that difficult at times).

This led to the discovery of the calc()  function!

Calc allows you to use math to size elements without having to resort to scripting.

In the example below,  I set up a lightbox div with a width that is 100 pixels less than half the width of the parent div  (calc(50% – 100px);).

In order to center this (because margin:auto wasn’t working for some reason),  I used (calc((100% – (50% – 100px))/2);)

 

.lightbox {
margin-top:20px;
 width:calc(50% - 100px);
 left: calc((100% - (50% - 100px))/2);
 height:auto;
 padding:15px;
 margin-left:auto;
 margin-right: auto;
 position:absolute;
 border: #110ef3 solid 2px;
 border-radius: 5px;
 background-color: #FFF;

}

Advertisements