Story Layout 1

by Brodingo

HTML

<div id="media">
    
    <h1>Awesome story</h1>
    
    <p>These are scientific commentaries; but the commentaries of the whalemen themselves sometimes consist in hard words and harder knocks&mdash;the Coke-upon-Littleton of the fist. True, among the more upright and honourable whalemen allowances are always made for peculiar cases, where it would be an outrageous moral injustice for one party to claim possession of a whale previously chased or killed by another party. But others are by no means so scrupulous.</p>
    
        <img class="insert" width="300" src="http://placekitten.com/300/160" alt="Lol it's a cat! Look how cute that cat is. I bet that cat is hungy for some kitty food or somethin.">
    
    <p>Some fifty years ago there was a curious case of whale-trover litigated in England, wherein the plaintiffs set forth that after a hard chase of a whale in the Northern seas; and when indeed they (the plaintiffs) had succeeded in harpooning the fish; they were at last, through peril of their lives, obliged to forsake not only their lines, but their boat itself. Ultimately the defendants (the crew of another ship) came up with the whale, struck, killed, seized, and finally appropriated it before the very eyes of the plaintiffs.And when those defendants were remonstrated with, their captain snapped his fingers in the plaintiffs' teeth, and assured them that by way of doxology to the deed he had done, he would now retain their line, harpoons, and boat, which had remained attached to the whale at the time of the seizure. Wherefore the plaintiffs now sued for the recovery of the value of their whale, line, harpoons, and boat.</p>
    
    <iframe title="YouTube video player" width="460" height="320" src="http://www.youtube.com/embed/BCHhwxvQqxg?wmode=transparent" frameborder="0" allowfullscreen=""></iframe>
    
    <p>Mr. Erskine was counsel for the defendants; Lord Ellenborough was the judge. In the course of the defence, the witty Erskine went on to...

CSS

body {
    background: #FAF5E2;
    color: #444;
    text-shadow: 0 1px 0 #fff;
    font-family: Lucida Grande, Georgia;
    font-size: 16px;
    line-height: 32px;
}

#media {
    width: 720px;
    margin: 0 auto;
}

#media p {
    margin-bottom: 16px;
}

.insert {
    float: left;
    margin: 0 20px 0 -80px;
    line-height: 0;
}

.insert img,
img.insert {
    box-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.insert:nth-of-type(2n) {
    float: right;
    margin: 0 -80px 0 20px;
}

h1 {
    font-size: 24px;
    margin-bottom: 16px;
}
h2 {
    font-size: 20px;
}

.desc {
    padding: 8px;
    margin-top: 8px;
    color: #666;
    font-size: 12px;
    line-height: 16px;
    border-radius: 4px;
    box-shadow: inset 0 0 4px rgba(0,0,0,.5);
}

iframe {
    display: block;
    margin: 0 auto 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.8);
}

JavaScript

$('img.insert').each(function(){
    var $this = $(this),
        altText = $this.attr("alt"),
        imgWidth = $this.attr("width"),
        wrapper = '<div class="insert" style="width:' + imgWidth + 'px"/>',
        altDesc = '<div class="desc">' + altText + '</div>';
    
    $this.removeClass("insert").wrap(wrapper).after(altDesc);
});