New Weblog Design Concept

by lovromar

HTML

<header>
    <h1><a href="#">Joshua Hibbert<a/></h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Weblog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Photos</a></li>
        </ul>
    </nav>
</header>
<div class="content">
    <div class="article">
        <h2>Why You Should Use Inline-Block when Positioning Elements</h2>
        <p>I was recently introduced to the idea of using <code>display: inline-block;</code> instead of floats when positioning elements (thanks <a href="http://twitter.com/cerebralideas/">Justin</a>). At first it was a bit of a shock to the system; I had always used floats, why should I change? But with time, the idea of no longer using floats for layout started to sound pretty good. For instance, it meant I could forget about using a clearfix hack.</p>
        <p>After doing some research&mdash;and using <code>inline-block</code> in a few projects&mdash;I have become a convert. And I'm hoping I can convince you to consider using it too.</p>
        <p>Before I get too far into it, I need to be honest with you: <code>inline-block</code> isn't a magic fix, but as long as you are aware of its quirks, you can work around them. Also, to clarify: I am not asking you to stop using floats altogether. Floats still have their uses, but it would pay to be more mindful when using them. No more using them willy-nilly!</p>
        <h3>The float property</h3>
        <p>Floats were originally used for wrapping text, and as such, they can play up when used to align elements. The most well-known issue is that non floated elements don't recognise floated children. This is due to floated elements being removed from the normal flow of the document.</p>
        <p>Another issue (in regards to layout) is that you can't centrally float an element; you are limited to left or right floats only. And an even lesser known issue is that elements in the flow of the document will collapse...

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    color: #333;
    font-family: "ff-meta-serif-web-pro", serif;
    font-size: 100%;
    line-height: 1.5;
    position: relative;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: 'liga', 'dlig';
       -moz-font-feature-settings: 'liga=1, dlig=1';
       -moz-font-feature-settings: 'liga', 'dlig'; /* FF 15+ */
        -ms-font-feature-settings: 'liga', 'dlig';
         -o-font-feature-settings: 'liga', 'dlig';
            font-feature-settings: 'liga', 'dlig';
    -webkit-font-smoothing: antialiased;
}
a {
    -webkit-transition: .25s;
}
header {
    background-color: #f3f3f3;
    border-bottom: 1px solid #ddd;
    padding: 1.5em 5% 0; /* Strangeness happening here */
    text-align:justify
}
header:after {
    display: inline-block;
    content: '';
    width: 100%;
}
header h1 {
    display: inline-block;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
}
header h1 a {
    color: #333;
    text-decoration: none;
}
header h1 a:hover,
header h1 a:focus {
    color: #38d;
}
header nav {
    display: inline-block;
}
header ul {
    list-style: none;
}
header li {
    display: inline-block;
}
header nav a {
    border-bottom: 1px solid transparent;
    color: #888;
    font-family: "facitweb", sans-serif;
    font-size: 1em;
    line-height: 1.5;
    margin-left: 1.5em;
    text-decoration: none;
}
header nav a:hover,
header nav a:focus {
    color: #38d;
}
.content {
    padding: 1.5em 5%;
}
h2 {
    color: #d33;
    font-family: "facitweb", sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: .6em;
}
h3 {
    color: #d33;
    font-family: "facitweb", sans-serif;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1.2em;
}
p,
pre {
    font-size: 1em;
    margin-bottom: 1.5em;
}
p a {
    border-bottom: 1px solid transparent;
    color: #38d;
    text-decoration: none;
}
p a:hover,
p a:focus {
   ...