Right Float Not Displaying properly in IE7

You actually have a clear class you have applied to the<p> tags. So IE7 is clearing the floats.

Also the img is not withing the <p> which means once the <p> clears the img needs a place to stay.

You can also keep the img with the <p> tag with a class (as you have already done to the img) floating the img right.


Awaiting feedback.

MD

Well guys, I tried a number of options and, at some point, they worked.  I tried eliminating the fixed width and replacing with margins, and I cleaned up the messy <p> tags (used divs to clear) though, like noted, I was not clearing the paragraph that was giving me the headache.  Ultimately I did have to place the <img> tag within a <p> tag to make it work.  The updated page is at the same url and the new code follows:

btw...  I'm Mrs Kevin - can't have anyone thinking he would do such fru fru pages....

Thanks bunches for the help - it was excellent.

New Code Within Page:
 
<h2>Kristen</h2>
      <p><a href="#"><img src="images/kristen_sm.jpg" alt="Kristen" width="136" height="113" class="featured2" onclick="MM_openBrWindow('photo_kristen.htm','Kristen','width=446,height=368')"/></a>Kristen was our first Papillon.  She is 4 years old and has produced two healthy litters. We adore her and readily acknowledge that she is the one who started it all. Her wonderful disposition and keen intelligence sold us on the breed and led us to acquire a companion for her.<br /><br />
      <span class="instruct">To view Kristen's pedigree, <a href="#" onclick="MM_openBrWindow('pedigree_kristen.htm','KristenPed','scrollbars=yes,resizable=yes,width=630,height=610')">click here</a>. For a larger photo, click her thumbnail.</span></p>
      <div class="clear"></div>
 
New Code For .css:
 
@charset "UTF-8";
body {
	background: #FFFFFF;
	font: 1em Tahoma, serif, sans-serif, monospace;
	color: #EEEEEE;
	margin: 0px;
	padding: 0px;
}
a:link {
	color: #E69AFA;
	text-decoration: none;
}
a:visited {
	color: #E69AFA;
	text-decoration: none;
}
a:hover {
	color: #EEEEEE;
	text-decoration: none;
}
p {
	padding-left: 10px;
	font-size: .85em;
}
img {
	padding-bottom: 15px;
	border-style: none;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1.4em;
	text-align: left;
	font-weight: normal;
	margin-left: 10px;
	padding: 0px;
	margin-top: 0px;
}
#container {
	margin: 0px auto;
	padding: 0px;
	width: 780px;
	background: #000000;
}
#header {
	margin: 0px;
	padding: 0px;
	height: 360px;
	width: 100%;
	background: url(images/header_bg.jpg) no-repeat center bottom;
}
#subheader {
	margin: 0px;
	padding: 0px;
	height: 180px;
	width: 100%;
	background: url(images/subheader_bg.jpg) no-repeat center bottom;
}
#nav {
	width: 640px;
	margin: 0px auto;
	padding: 130px 0px 0px;
	height: 45px;
}
#front #nav {
	padding-top: 315px;
}
#nav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
}
#nav  li {
	float: left;
	text-align: center;
	width: 127.5px;
	margin: 0px;
	padding: 0px;
}
#nav   a:link {
	font-weight: bold;
	font-size: 0.85em;
	letter-spacing: 0.085em;
}
#nav a:visited {
	font-weight: bold;
	font-size: 0.85em;
	letter-spacing: 0.085em;
}
#content a:link {
	text-decoration: underline;
}
#content a:visited {
	text-decoration: underline;
}
#col1 {
	margin: 0px;
	float: left;
	width: 195px;
	height: 365px;
	padding: 15px 10px 10px 75px;
}
#col2 {
	margin: 0px;
	padding: 15px 10px 10px 20px;
	float: left;
	width: 190px;
	height: 365px;
}
#col3 {
	margin: 0px;
	float: left;
	width: 195px;
	height: 365px;
	padding: 15px 65px 10px 20px;
}
#divided {
	border-top: 1px dotted #777777;
	margin: 0px auto;
	width: 620px;
	border-bottom: 2px solid #4F336A;
	padding: 2px 0px;
}
#subcontent {
	margin: auto 90px auto 90px;
	padding-top: 2em;
	padding-bottom: 2em;
}
#subcontent a:link {
	text-decoration: underline;
}
#subcontent a:visited {
	text-decoration: underline;
}
#subcontent p {
	margin: 0px auto;
	padding: 0px;
	width: 500px;
}
#subcontent h2, h3, h4, h5, h6 {
	font-size: 1.2em;
	margin: 30px 0px 20px 50px;
	padding: 0px;
}
#divided   a img  {
	color: #000000;
	float: left;
	margin: 0px;
	padding: 10px 0px 0px;
}
#divided #shows {
	margin-right: 22px;
	margin-left: 22px;
}
#footer {
	font-size: 0.75em;
	margin: 15px 0px 20px;
	padding: 0px 0px 1.5em;
	width: 100%;
	text-align: center;
	line-height: 1.25em;
}
#flash {
	font-size: 0.5em;
	width: 480px;
	margin: 0px;
	padding: 30px 0px 10px 60px;
	text-align: center;
}
.instruct {
	font-size: .75em;
}
.dashed {
	height: 0.5em;
	width: 160px;
	border-top: 1px dotted #777777;
	display: block;
	margin-left: 10px;
}
.bullet   {
	padding-left: .75em;
	padding-bottom: 10px;
}
.intro {
	font-weight: bold;
}
.featured {
	margin-left: 60px;
	margin-top: 0px;
	margin-bottom: 20px;
	width: 480px;
	padding: 0px;
}
.featured2 {
	padding: 0px;
	margin: 0px 0px 20px 40px;
	float: right;
}
.clear {
	clear: both;
	float: none;
}

Select allOpen in new window

Thanks guys - really appreciate the help.

Glad it is fixed.

MD