Computers > Web Design
One method using CSS to wrap text around an image using CSS Float with Padding is explained below with examples on the left-side:
Wrap Text Around Images Using CSS
One method using CSS to wrap text around an image using CSS Float with Padding is explained below with examples on the left-side:
| Ex. 1 - Float Right padding: 0px 0px 0px 3px;  As you can see in this example the image is aligned to the right of the text you are reading here using float: right; - Make sure your containing area DIV or table TD is already set before adding your text or image like I have done in this gray area. As you see, you will never have an absolutely perfect padding around the image since words have variable length. In the 3rd example below I demonstrate newspaper layout using CSS in DIV that give a more precise look. Ex. 2 - Float Left padding: 3px 3px 0px 3px;  Here is another example. This time I used float: left; and adjusted the padding a little less than the first example for the bottom value set at zero (0). It's bascially personal preference how much padding you like. In this case, if I kept the padding of 3 px like the first example, then I end up with excess space below the image because of factors of font size relative to the image.Ex. 3 - Float Right with Text Justify inside a DIV tag padding: 0px 0px 0px 10px;  Some people prefer to have a justified appearance for text that resembles a newspaper or magazine layout. I tend to avoid this approach for the Web but that's just my own preference. Depending on the length of words themselves and the working area, you can end up with stretched words (IE) or spaces (Firefox) that don't look very appealing to anyone. |
The code used to make this alignment happen in the first example was: <img style="float: right; padding: 0px 0px 0px 3px;" src="gort.gif" width="80" height="80" /> Appearance wise, it's a judgment call as to how much padding you want to place around your image relative to the text. You mostly want to avoid the appearance of text touching an image. Padding is a great way to prevent that from happening. In example #2, I used float: left; <img style="float: left; padding: 3px 3px 0px 3px;" src="girl_cry.gif" width="80" height="80" /> For reference, padding values are read clockwise starting at the top of an image. Example showing clockwise order if I used padding: 8px 3px 0px 7px;
In example #3, I used image float: right; but I also included justification to text to allow content to appear more like a newspaper or magazine layout. <DIV style="text-align:justify; text-justify:distribute-all-lines;"> The appearance will vary among browser types and versions. For example, this works great for Windows Internet Explorer but leaves spaces in Windows Firefox browser.
|
