Tutorials

Text Wrapping in Dreamweaver

Ex. 1 - Float Right

padding: 0px 0px 0px 3px;

Image Using CSS Float Right and Padding 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.

The code used to make this alignment happen in the first example was:

Ex. 2 - Float Left

padding: 3px 3px 0px 3px;

Image Using CSS Float Left and Padding 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.
The code used to make this alignment happen in the first example was:

Ex. 3 - Float Right with Text Justify inside a DIV tag

padding: 0px 0px 0px 10px;

Image Using CSS Float Right and Padding with Text Justification 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.

In this I used image float: right; but I also included justification to text to allow content to appear more like a newspaper or magazine layout.