CSS Calc - boxes always a %age of their container

CSS Calc - boxes always a %age of their container.markdown

CSS Calc - boxes always a %age of their container

A simple demo to demonstrate a responsive container containing boxes of equal widths within.

A Pen by Vincent Pickering on CodePen.

License.

index.html

<div class="container">
<div class="block">asdas</div>
<div class="block">asdas</div>
<div class="block">asdas</div>
</div>

style.css

/*Setup Environment */
html                 { box-sizing: border-box;  }
*, *:before, *:after { box-sizing: inherit; }
body                 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:16px; margin:0; padding:0; }

.block               { float:left; display:inline-block; background-color:#999999;  color:#000000; font-size:0.8em; text-align:center; line-height:4em; }

/*
Calc Demo 100% Container, equally distribute containers within the box.
--
In this demo, we make the width of each box 100% divided by the number of boxes then subtract the margin left & right.
As you scale the page the box will always be 1/3 of the total width.
*/

.container  { width:80%; height:200px; margin:auto; }

.block      { width: calc(100% / 3 - 10px); height:100%; margin-left:5px; margin-left:5px; padding:10px; border:10px solid red; }