When an image sits on the sides of your text, it helps to have space between the text and the image so the words aren’t right up against the edge. As some browsers treat the margins and padding differently, the following styles will accommodate most browser’s “space requirements” so the image doesn’t overlap the text or any lists that appear inline with the image.

Float image Left and Right

img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

The declaration of display:inline keeps the image inline with the text that you placed it with.

Now, it is time to add the float declaration to the images. BUT WAIT. Why should we waste our left and right floats on just images? Why not use them on anything that we want to sit on the right or left of the page and have the text float around it? You can do that, you know. But that’s for another tutorial. We’re not going to waste this, so if it isn’t there in your style sheet already, add the following:

.right { float: right; } .left { float: left; }

Clear The Display

In the event the image is larger than the amount of text that would otherwise surround it, causing the image to hang like a flag over some element below it, then at some point in the text, you’ll want to clear the display. Note that there is no text inside this division.

<div style="clear:both;"></div>