Page is a not externally linkable
myrrh - 3:47 am on Jan 20, 2013 (gmt 0)
I want to have three right-floated images (arranged vertically) and the corresponding text for each to the left of its image.
The images are taller than their associated text and I want the top of each image even with the top of its text.
-- The top image and its text are aligned as desired.
-- The middle image and its text are also correct.
-- The text associated with the bottom image is positioned up against the text for the middle image, as if it's ignoring the clear property on the middle image.
I have read over and over about floats and clears and I still have trouble understanding it.
? Can you tell by the code below what I'm missing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>
<img style="float:right; clear:none;" src="example.com/top-image.jpg" />
<p><b>Top image text</b></p>
<p>More top image text</p>
<img style="float:right; clear:none;" src="example.com/middle-image.jpg" />
<p style="clear:left;"><b>Middle image text</b></p>
<p>More middle image text</p>
<img style="float:right; clear:none;" src="example.com/bottom-image.jpg" />
<p style="clear:left;"><b>Bottom image text</b></p>
<p>More bottom image text</p>
</body>