Need to Wrap Image?

Hi Happy New year :slight_smile:

Rays example is more flexible if you have articles without images and the text can collapse more easily to the side. Your example will mean that text will eventually wrap under the image rather than stay aligned nicely to the right (which may or may not be an issue but often looks messy if the last line only wraps underneath).

There are many ways to do this but if you are always going to have an image showing and the structure is always the same then you can lose the extra image div and just put the image in the first p element and drag it left. Pad out all the p elements and they will stay clear.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* ARTICLE INDEX Styles */
.articleSummary { padding: 30px 0px; }
.articleSummary h2 { font-size: 1.2em; }
.published a {
	float: left;
	margin:0 0 0 -120px;
	position:relateive;/* IE fix - just in case*/
}
.articleSummary p {
	margin:0 0 1em;
	padding:0 0 0 120px;
}
p.published {
	margin:0;
	font-size: 0.8em;
	font-weight: bold;
}
img {
	display:block;
	background:red;
	height:100px
}/* for demo only */
</style>
</head>

<body>
<!-- Summary #2 -->
<div class="articleSummary">
		<h3>Consider becoming an S-Corporation</h3>
		<p class="published"><a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation"> <img src="<?php echo BASE_URL; ?>images/S-Corp.png" width="100" alt="Alternative text here" 	title="S-Corp.  Credit: John Doe, Wikimedia Commons." /> </a>Published: December 31, 2011</p>
		<p>When most people think of "corporations" they think of mega-companies like Wal-mart, Microsoft, General Motors, Citibank, 
				and so.  However the reality is that all it takes is one person to become a "corporation", and now might be the right time for your 
				small-business to consider making the switch.</p>
		<p>Incorporating your small-business isn't nearly as difficult or as expensive as you might think, and it offers benefits that may not
				be so obvious. <a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">Learn how S-Corporations provide
				financial benefits and legal protection</a> that you need!</p>
</div>
</body>
</html>


It all depends on how flexible you want it to be as to which approach you take.

Don’t use the same alt and title text in the image as that will annoy screen readers greatly as they read out the same information twice. Also do not include the word picture or imafe in the alt text because screenreaders announce that it is an image before the text is read out so users don;t want to hear “Image”, “Image of …”.

More info here.