Today I'd like to write down a little trick I've been using for years in some of my sites, it's about using CSS to float an image or an adsense block so that the text flows around it.
But as you may know, one of the issues with this float:left or float:right is that the text will flows on the side and below, but not above.
So how to have the floated image inside the text, so that it flows around it?
Here's the simple trick:
<div style="width: 1px; height: 100px; float:right;"></div>
<div style="float:right; clear:right;">YOUR IMAGE OR ADSENSE CODE</div>
YOUR TEXT
Notice the first div? It's simply a 1px div (0px doesn't work with ie, although it does with FireFox) and you can modify it's height.
This example is for a div float on the right, I'll let you a few seconds to work out what to change if you wanted the image on the left..
Found it? Not so hard..
<div style="width: 1px; height: 100px; float:left;"></div>
<div style="float:left; clear:left;">YOUR IMAGE OR ADSENSE CODE</div>
YOUR TEXT
That way you can change the common design of having the image on the left and the text flowing on the right side, you can now allow the text to start first and then meet the image and go around it, without having to do anything else to the text.
And if you want to put two images, one on the right and one on the left below, you can do this:
<div style="width: 1px; height: 100px; float:right;"></div>
<div style="float:right; clear:right;">YOUR IMAGE OR ADSENSE CODE</div>
<div style="width: 1px; height: 500px; float:left;"></div>
<div style="float:left; clear:left;">YOUR SECOND IMAGE OR ADSENSE CODE</div>
YOUR TEXT
Note that the third div has a bigger height, it should be the height of the first one + the height of the second one + the space you want between the first image and the second one. Just try it with some random text and you'll understand how it works. Here is a screenhot showing you the end result:
Post new comment