Side by Side boxes

by ChrisStanyon

HTML

<div id="wrapper">
    <h1>Proof Reading</h1>
    
    <div id="left">
        <h2>This is the left</h2>
        <div class="content">
            This is where the content goes
        </div>
    </div>
    
    <div id="right">
        <h2>This is the right</h2>
        <div class="content">
            This is where the content goes
        </div>
    </div>
</div>

CSS

body { font-family: Verdana; font-size: 12px;margin:20px; } 
#wrapper { width: 500px; overflow:hidden; background-color:#F0F0F0; padding: 10px; }
#wrapper h1 { color: blue; font-weight:bold; font-size:1.3em; margin-bottom:7px; text-align:Center;}
#wrapper h2 { font-weight:bold; text-align:center; margin-bottom:10px; }
#left { width: 48%; float:left; }
#right { width: 48%; float:right; }
.content { border: 3px groove green;padding:5px; }