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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s