Blockquote floated margins overlap adjacent floated elements

HTML & CSS
1

On this page > http://stones-alt.clickbump.com/trent-reznor-confirms-new-nine-inch-nails-lineup/

The blockquote that’s next to the floated image is overlaying it. Any ideas how to tweak the css so that the blockquote element honors the floated image’s margins?

I want the blockquote to align the same as the text that precedes it.

Here’s the css on the blockquote element:


blockquote{
	line-height:1.25em;
	border:1px solid #ccc;
	border-width:1px 0;
	margin:10px 0 0 0;
	padding:0 10px 0 50px;
	font-style:italic;
	font-size:1.3em;
	quotes:'\\\\201C''\\\\201C';
	clear:left;
	position:relative
}

blockquote:before{
	line-height:1em !important;
	content:open-quote;
	font-size:5em;
	position:absolute;
	color:#ccc;
	left:5px;top:10px;
	font-family:georgia,serif;
	font-style:normal;
	font-weight:normal
	}
2

Try setting the blockquote to overflow: hidden;

3

Exactly! Why didn’t I think of that???

Thanks again Ralph. Easy fix :slight_smile: