Warning: curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when an open_basedir is set in /www/htdocs/w006633a/projekte/doctypehtml.net/www/lib/Curl.php on line 98
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"> <title> calc() function – doctypehtml.net </title> <base href="http://doctypehtml.de/"> <link rel="stylesheet" href="http://doctypehtml.de/assets/css/layout.css" type="text/css"> <link rel="stylesheet" href="http://doctypehtml.de/assets/css/mobile.css" type="text/css" media="screen and (max-width: 780px)"> <link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"> </script> <script src="http://doctypehtml.de/assets/js/jquery.DOMWindow.js" type="text/javascript"> </script><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <link href="http://doctypehtml.de/css3/calc/css/calc.css" rel="stylesheet" type="text/css"> </head> <body> <a href="http://github.com/manuelbieh/doctypehtml.net"><img style="position: absolute; top: 0; right: 0; border: 0;" src= "https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a> <div id="wrapper"> <h1> <a href="/">&lt;!DOCTYPEhtml.net&gt;<br> HTML5/CSS3 Demos + Experiments</a> </h1> <h2> calc() function </h2> <p> You can use the CSS calc() function to subtract e.g. the padding or border-width of an element from its actual width. </p> <div class="outer"> <p id="intro"> This ist the outer div with a total width of <span>100%</span>. All inner divs have 8px padding both left and right as well as an 2px border around. All inner divs also have <code>float: left</code>. </p><code>width: calc(<br> 25%<br> - 8px*2<br> - 2px*2<br> - 4px*2<br> )</code><code>width: calc(<br> 60%<br> - 8px*2 <em>/* (padding left/right) */</em><br> - 2px*2 <em>/* (border left/right) */</em><br> - 4px*2 <em>/* (margin left/right) */</em><br> )</code><code>width: calc(<br> 15%<br> - 8px*2<br> - 2px*2<br> - 4px*2<br> )</code><br style="clear: both;"> <p class="widthselection"> <strong>Set outer width:</strong> <span class="link">100%</span>, <span class="link">90%</span>, <span class="link">75%</span>, <span class="link">65%</span>, <span class= "link">530px</span> <script type="text/javascript"> $(function() { $('.widthselection span').bind('click', function() { $('.outer').css({width: $(this).text()}); $('#intro span').text($(this).text()); }); }); </script> </p> </div><br style="clear: both;"> </div> <div> <a href="http://doctypehtml.de/index.html">Overview</a> – All examples are lovingly handcrafted by <a href="http://www.twitter.com/ManuelBieh">@ManuelBieh</a> | <a href= "http://www.manuel-bieh.de/en/">http://www.manuel-bieh.de</a>. Inspired by <a href="http://www.html5demos.com">html5demos.com</a> from the great <a href= "http://www.twitter.com/rem">@rem</a> | <a href="http://doctypehtml.de/viewsource/index.php?url=http://doctypehtml.de/css3/calc" class="viewsource">view source</a> | <iframe src= "http://platform.twitter.com/widgets/tweet_button.html?url=http://doctypehtml.net/&amp;via=manuelbieh" style= "vertical-align: middle; width: 110px; height: 21px; overflow: hidden; border: 0;"></iframe> <iframe src= "http://www.facebook.com/plugins/like.php?href=http://doctypehtml.net/&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21" style="vertical-align: middle; border:none; overflow:hidden; width:130px; height:21px; overflow: hidden; border: 0;"></iframe> <div class="g-plusone" data-size="medium" data-count="true"></div> </div><script type="text/javascript"> $('.viewsource').openDOMWindow({ height:'90%', width:'90%', positionType:'absolute', positionTop:50, eventType:'click', positionLeft:'5%', windowSource:'iframe', windowPadding:0, loader:1, // loaderImagePath:'animationProcessing.gif', loaderHeight:16, loaderWidth:17 }); </script><script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-16083973-9']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script><script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script> </body> </html>