"CSS Calc Trick"
Bootstrap 3.3.0 Snippet by webenlance

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>A Couple of Use Cases for Calc() (css tricks)</h2> </div> </div> <!--example one--> <h1>Example 1</h1> <div class="div_example"> <p>Dr. Anil Kohli is an Endodontist, Dental Surgeon and Dentist in Lajpat Nagar, Delhi and has an experience of 40 years in these fields. Dr. Anil Kohli practices at Dr. Soni's Dental Clinic - "(Hony.) Brig. Dr. Anil Kohli" in Lajpat Nagar, Delhi. He completed BDS from King George's Medical College in 1976, MDS - Endodontics from King George's Medical College in 1978 and DNB from Diploma National Board in 1988. He is a member of Indian Dental Association, Indian Endodontic Society, American Dental Association, American Association of Endodontists and Membership of the Royal College of Surgeons (MRCS). Some of the services provided by the doctor are: Implants, Braces, Crowns And Bridges, Endodontics and Root Canal etc.</p> </div> <!--example 2--> <h1>Example 2</h1> <div class="column-webenlance-1"></div> <div class="column-webenlance-2"></div> <div class="column-webenlance-3"></div> <div class="column-webenlance-1"></div> <!--example 3--> <h1>Example 3</h1> <div class="paddingtop"> <div class="area-web-one"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit reprehenderit culpa sunt magnam dolores pariatur qui error similique itaque accusamus. Quisquam voluptates sit veritatis eos! </div> <div class="area-web-two"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit reprehenderit culpa sunt magnam dolores pariatur qui error similique itaque accusamus. Quisquam voluptates sit veritatis eos! </div> </div>
/*example 1 */ .div_example { margin: 0px 0px 0px 0px !important; background-color: lightblue; width: calc(100% - 20%); } /*example 2*/ /*applied same css for column word*/ [class^='column'] { float: left; min-height: 200px; background: red; border: 1px solid black; } /*applied same css for column word*/ .column-webenlance-1 { width: calc(100% / 7); } .column-webenlance-2 { width: calc(100% / 7 * 2); } .column-webenlance-3 { width: calc(100% / 7 * 3); } .paddingtop { padding-top:20px; float:left;} /*example 3*/ .area-web-one { width: 40%; float: left; height: 100%; margin-right: 1em; padding: 30px; background: red; color: white; } .area-web-two { width: calc(60% - 1em); float: right; height: 100%; padding: 30px; color: white; background: blue; }

Related: See More


Questions / Comments: