CSS inline element preventing hover - css

Question

Using the following markup, I'm creating an image with two floated text overlays, one for the heading and one for the summary text. It's rendering how I wish and I'm able to use the entire image as well as the headline & summary to access the link except for the area immediately to the right of the 'headline' up to the end of the 'summary'. This happens in all browsers (except IE9 and lower). Any ideas why and how I can get around it?
HTML:
<div class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<div class="overlay">
Headline
Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.
</div>
</div>
CSS:
body {
border: 0;
color: #5B6064;
font-family: Helvetica, Arial, Sans-Serif;
font-size: .75em;
line-height: 1.6em;
margin: 0;
padding: 0;
background-color: #a5a5a5;
}
a {
text-decoration: none;
color: #5B6064;
}
a:visited {
text-decoration: none;
}
img {
border: 0;
}
.image {
position: relative;
width: 100%;
/* For IE6 */
display: block;
overflow: hidden;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
display: block;
}
.headline {
color: #FFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary {
max-width: 350px;
margin-top: 3px;
color: #FFF;
font: 14px/14px Helvetica, Sans-Serif;
letter-spacing: 0;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary a {
color: #FFF;
}

Answer 1

I'd wrap the whole thing in an a tag (cleaner code). You would need to adjust a bit of your css.
EDIT
I changed the div elements to span so it is syntactically correct (thanks for the reminder Phrogz). Since your css already had display: block for the div elements, changing them to span is not an issue.
<a href="Default.aspx">
<span class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<span class="overlay">
<span class="headline">Headline</span>
<span class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</span>
</span>
</span>
</a>

Answer 2

The headline is being floated left. If you remove the float and add display:block; to the anchor, it will take up the full image width.