Text Between Two Images With CSS and Without Tables

It is customary using standard HTML to position text between two images using table cells. The table would consist of three cells with the text in the middle cell and the images in the right and left cells. Did you know this can be done with CSS without the use of tables? Get ready, we are stepping a bit beyond the basics of CSS for this article.

Note that our articles refer to "external" CSS because this is the most effective way to develop a web site, and how we design all of our website templates.

If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

To accomplish this table-less trick, you simply need to add the custom float style to your external style sheet:
.floatleft {
float: left;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 10px;
}

.floatright {
float: right;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 0px;
}

And then assign the custom styles to your image (img) tags:

<img src="images/yourimage1.gif" class="floatleft" width="100" height="50">
<img src="images/yourimage2.gif" class="floatright" width="100" height="50">

Note that I added horizontal and vertical spacing around each image within the custom class by using the margin style. This will allow for adequate room around each image, and will accomplish a wrap around text effect with a margin. The text between the images won't be aligned directly against the images. You can increase the margin size to whatever you feel is appropriate for your project.