Alignment problem

[Eiolon]

I am trying to get my subheader to line up directly beneath the icon.  Here is how it currently looks:

 

http://www.intravising.com/css.gif

 

Thanks

 

<div id="content">

<p class="icon"><img src="images/settings.png" /></p>
<p class="header">Test Header</p>
<p class="subheader">Test Subheader</p>

</div>

#content {
padding: 20px;
}

#content .icon {
float: left;
}

#content .header {
margin-left: 10px;
margin-top: 12px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #339999;
}

#content .subheader {
float: left;
margin-top: 60px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #990099;
}