Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Text Between Two Images With CSS and Without Tables
By BasicTemplates with External CSS

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.