HTML:
<div id="main" class="rounded-corners">
<div id="benefits">
<img src="/benefits-heading.png" style="padding: 30px;" />
<div id="corporateside">
<h1>Corporate Benefits</h1>
<p>blah</p>
</div>
<div id="employeeside">
<h1>Employee Benefits</h1>
<p>blah</p>
</div>
</div>
</div>
CSS:
#corporateside { width: 420px; padding: 20px; height: 100%; display: block; }
#corporateside h1 { font-size: 24px; font-weight: 500; }
#corporateside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#corporateside p { padding: 0px; margin-top: -10px; }
#employeeside { width: 420px; padding: 20px; height: 100%; display: block; }
#employeeside h1 { font-size: 24px; font-weight: 500; }
#employeeside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#employeeside p { padding: 0px; margin-top: -10px; }
#benefits { position: relative; height: auto; }
#main { width: 940px; height: auto; background-color: #ffffff; margin: 0 auto; padding: 0; background: #ffffff; border: 2px solid #ffc40d; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
I have made some improvements by simplifying the structure and styling. Thank you for your assistance!