<html>
<head>
<title>Side-by-side floats</title>
<!-- Put your CSS here -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- 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>
<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>
</div>
</div>
</body>
</html>
/*
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;
}