By default, images in WordPress posts are justified left, with text following (in a new paragraph) underneath. Which is fine a lot of the time, but obviously there are occasions when you would like to center an image, perhaps with text underneath, wrap text around the image or do that together with aligning the image to the right.

No problem, the HTML and CSS for all these requirements are quite simple:

HTML:
<div class="centered"><img src="http://carpejugular.com/files/pendle.jpg" width="230" height="167" alt="" />Pendle Hill</div>
<div class="alignright"><img src="http://carpejugular.com/files/pendle.jpg" width="230" height="167" alt="" />Pendle Hill</div>
<div class="alignleft"><img src="http://carpejugular.com/files/pendle.jpg" width="230" height="167" alt="" />Pendle Hill</div>

CSS:
.centered {
	text-align: center;
	}
.centered img {
	display: block;
	margin: 0 auto 5px auto;
	}
.alignright img {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	float: right;
	}
.alignleft img {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	float: left;
	}

Unfortunately, the illustration showing how well this all works only applies to Explorer. The result in Mozilla browsers, such as Firefox and Netscape, is somewhat different:

This mess happens because floated entities (see float:left; & float:right; in the CSS code) are supposed to be able to expand beyond their container. They are, after all, “floating”, ie not tethered to a container. Although the result in this instance looks horrible in fully-compliant browsers, such browsers are actually handling the parameter correctly.

All very interesting, but right now we want to know how to block this behaviour, and fortunately someone discovered this hack. Just add this code to the CSS above, and Mozilla browsers will show the same as Explorer:

.alignright:after, .alignleft:after {
	content: ".";
	display: block;
	line-height: 1px;
	font-size: 1px;
	clear: both;
	}

BTW I have added borders here to clarify the illustration, but they are not necessary to the structure, therefore I have omitted their codes to keep the example clean.

Update

Whenever you float blocks alongside each other, within a holding block, the problem illustrated above is likely to occur. Sometimes it is enough to add a clear:both; to the styling of the next block, but a consistent approach more quickly becomes instinctive.

/* add this to every css file that you use */
.clearfix:after,.clear{content:".";display:block;height:0;line-height:0;clear:both;visibility:hidden;}

Now you have two options which will always be available without further preparation:

<div class="holder clearfix">
	<div class="left-float">content</div>
	<div class="right-float">content</div>
</div>

or

<div class="holder">
	<div class="left-float">content</div>
	<div class="right-float">content</div>
	<div class="clear"></div>
</div>