CSS Region Downgrade Example

by dswitzer

HTML

<article id="content">

    <h1>We Suck at Apologies</h1>
    <time datetime="2012-03-29" pubdate>March 29, 2012</time>

    <p>
        Several incidents in the past few weeks, both public and private, have led me to the conclusion 
        that we all suck at apologies when we have offended people. I'd like to try and start a 
        conversation to see if we can fix that.  I feel like I am qualified to give advice here, as I 
        spent my 20's as an angry and often offensive guy, who had to apologize quite a bit.  Because of 
        this, I've learned a little of what works and what doesn't.
    </p>

    <p>
        Let's start with a premise.  You said something that offended someone somewhere. They are angry,
         and they have called you out on it in some fashion.  (It's vague, but every example I could 
         come up with might have been offensive.)
    </p>

    <h2><q>Why should I apologize, what I said (or did) was right?</q></h2>

    <p>
        This here is the major problem we have with apologizing. We think that apologizing means that 
        we are saying "I was wrong, and you were right." It doesn't.  When you offend someone, 
        you have damaged your relationship with them. Whether you are an individual offending another 
        individual or a company who offended a potential market, your actions have damaged the 
        relationship. <strong>The true purpose of an apology is to try and fix the damage in the 
        relationship between you and the offended party.</strong> 
        That should be your goal.
    </p>

    <h2><q>I didn't mean to offend you.</q></h2>

    <p>
        Actions have consequences, intentions do not matter.  Actually, it would be better to say, 
        intentions can mitigate consequences, but they cannot erase them.  Suppose I hit a young 
        man with my car. That my intention was to drive home has no impact on the consequence that 
        the young man's leg is broken. Now the fact that...

CSS

html{
    background-color: #000;
    padding: 0;
    margin: 0;
}

body{
    margin: 0 auto;
    padding: 0 10px;
    max-width: 820px;
    overflow: visible;
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
    background-color: #FFF;
}

article{
    margin: 0 0 0px 0;
    padding: 0;
}

h1, h2{
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
    font-weight: normal;
    color: #E00;
}

h1{
    font-size: 40px;
    margin: 0 0 10px 0;
}

h2{
    font-size: 30px;

}

#content {
    -webkit-flow: 'foo';
    -webkit-flow-into: foo;
}

.region {
    background-color: white;
    -webkit-box-sizing: border-box;
    content: -webkit-from-flow('foo');
    -webkit-flow-from: foo;
    margin: 20px 0 20px 0;
    height: auto;
    overflow: hidden;
    padding: 10px 10px 10px 0;
    width: 48%;
    float: left;
}

#region1{
    float: none;
    width: 100%;
    height: 240px;
    margin-top: 0;
}

#region2{
    height: 500px;
    float: right;
    margin-left: 0;
}

#region3{
    height: 500px;
    margin-right: 0;
}

#region4{
    float: none;
    width: 100%;
    height: 2000px;
    overflow: visible;
    margin-bottom: 0px;
}

img{
    width: 100%;
    float: right;
}
hr{
    clear: both;
    padding: 0;
    border: none;
    border-top: medium double #E00;
    color: #E00;
    text-align: center;
    margin-top: 30px;
}

hr:after {
    content: "§";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
    color: #E00;
}

/* hide the regions by default */
#display {
    display: none;
}

JavaScript

if (document.webkitGetFlowByName){
        document.getElementById('display').style.display = "block";
    }