Edit in JSFiddle

        <title>Side-by-side floats</title>
        <!-- Put your CSS here -->
        <link rel="stylesheet" href="css/styles.css" />
        <!-- Part 2: Lay out the the two books side by side --> 
        <div class="second-part clearfix">
            <div class="pride-and-prejudice">
                <h2>Pride and Prejudice</h2>
                <p>It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife.</p>
                <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.</p>
                <p>“My dear Mr. Bennet,'' said his lady to him one day, “have you heard that Netherfield Park is let at last?”</p>
            <div class="pride-and-prejudice-and-zombies">
                <h2>Pride and Prejudice and Zombies</h2>
                <p>It is a truth universally acknowledged that a zombie in possession of brains must be in want of more brains. Never was this truth more plain than during the recent attacks at Netherfield Park, in which a household of eighteen was slaughtered and consumed by a horde of the living dead.</p>
                <p>“My dear Mr. Bennet,” said his lady to him one day, “have you heard that Netherfield Park is occupied again?”</p>

This looks weird, but if you have this CSS in your stylesheet, you can add the class "clearfix" to the "second-part" div to prevent it from collapsing 

From: http://css-tricks.com/all-about-floats/

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;