I need help figuring out why I am unable to float a div box next to an image. Despite successful attempts with text, the div seems to be getting stuck behind the image instead of appearing beside it.
http://jsfiddle.net/n8ZDQ/1/ (observe how the red div is mostly hidden behind the image)
HTML:
<img src="http://stignatiusyardley.org/pictures/NFP/NFP%20family%20image.jpg" style="float:left;width:370px;height:246px;" />
CSS:
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
}