float and padding issue

[jjspelman]

I am trying to figure out why I cannot achieve the padding in the
.footer div for the following code without adding a clear after the copyright notice? Also the copy in the .footerin div is not white:


<div class="footer">
<div class="footerin">

<!-- footer cta -->

<div class="footercta">

<h4>Call 800-555-1212</h4>
<p>Company name<br />
Address<br />
City, State Zip</p>
<a href="/index.php"><img src="images/some_logo.png" alt="Logo" title="Logo" width="150" height="19" /></a>
</div>



&copy;2011 Some Company, Inc.
<div class="clear"></div>

</div>
</div>


Here is the corresponding CSS:



/* ========== */
/* ! footer */
/* ========== */


.footer {

/* background-image: url(images/bottomBkgd.jpg);
background-repeat: repeat-x; */
background: #333;
width: 960px;
color: white;

}

.footerin {

padding: 20px;
font-size: .8em;
}

.footercta {

float: right;
text-align: right;

}


If I float the .footercta div left, it respects and shows the 20px padding from the .footerin div. But when i float right (without the clear) it does not.