Blog Post

by lovromar

HTML

<div id="container">

    <header role="banner" class="cf">

        <a id="logo" href="javascript:void(0)" rel="nofollow">Joshua Hibbert</a>
                                       
        <nav class="cf" role="navigation">
            <ul class="cf">
                <li><a href="javascript:void(0)">Home</a></li>
                <li><a href="javascript:void(0)">About</a></li>
                <li><a href="javascript:void(0)">Portfolio</a></li>
                <li><a href="javascript:void(0)">Lab</a></li>
            </ul>
        </nav>
                
    </header> <!-- end header -->
            
    <div id="content">
                
        <div id="main" class="cf" role="main">

            <article class="post" role="article" itemscope itemtype="http://schema.org/BlogPosting">
    
                <header>
                    <h1 class="single-title" itemprop="headline">Improving the Box Model with box-sizing</h1>
                </header><!-- end article header -->

                <section class="post_content clearfix" itemprop="articleBody">
                    <p>Let’s say that I am cod­ing up a page that has 2 columns, each at 50% width. Easy. Except the text doesn’t read so well with­out padding. Ok, so lets add some padding in; 20px should be plenty.</p>
                    <p>Lay­out = broken.</p>
                    <p>I no longer have 2 columns at 50% width. My columns are now stacked as their width is in excess of the 50% I defined. There is an easy fix though: <a href="javascript:void(0)"><code>box-sizing: border-box;</code></a>.</p>
                    <p>Using <code>box-sizing</code> forces the padding (and bor­ders) inside the ele­ment rather than out­side and it works on all browsers <a href="javascript:void(0)">down to <span class="caps">IE8</span></a>, although you will have to use browser prefixes:</p>
                    <pre><code>.box-sizing {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
           ...

CSS

/* 

Author: Joshua Hibbert
Author URI: http://joshuanhibbert.com
Version: 3.02

License: GPL
License URI: http://www.gnu.org/copyleft/gpl.html

Table of Contents:

    1. Base Styles
        - 1.a. Normalize
        - 1.b. Base Styles
    2. Typography
        - 2.a. Fonts
        - 2.b. Styles
    3. Layout
        - 3.a. Header
        - 3.b. Navigation
        - 3.c. Content
        - 3.d. Footer
    4. Extra Styles
    5. Animation
    6. Media Queries

*/

/********** 1. BASE STYLES**********/

/* 1.a. Normalize - http://necolas.github.com/normalize.css/ */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
html { font-size: 100%; overflow-y: scroll; -webkit-tap-highlight-color: hsla(0,0%,0%,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-family: sans-serif; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
mark { background: #ff0; color: #000; }
pre, code { font-family: monospace, serif; font-size: 16px; margin: 0; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
small { font-size: 75%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; max-width: 100%; -ms-interpolation-mode: bicubic; }
form { margin: 0; }
fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; *margin-left: -7px; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button,...