Computer Tips / Web Design / wrap text images using css
Home | Computer Tips | Home DIY Tips | Safety Tips | Fun Facts                                                                                                 stolons: Worklooker | Monkeydoit


Wrap Text Around Images Using CSS Float and Padding

Here, two methods are explained for wrapping text around images in CSS. The first method explained below is the CSS image float method. This method is used to align a stand-alone image with a paragraph of text where no captions are necessary to accompany the image. The second method, explained on page 2, is the CSS div float method. This method utilizes a div to contain your image. The div can then be set to make your text wrap around it. I prefer this method because it allows you the option to place captions above or below an image. Even when I don't use a caption for an image I use this as my preferred method in case I want to add a caption in the future. There are other ways in HTML to wrap text around images but they require the use of tables or have limitations. I recommend you try the steps provided here first.


WRAP TEXT METHOD #1: The CSS image float method

All this method really requires is that you add a style to your image tag. It's really easy. First though, lets look at what I am trying to achieve visually. The example below shows an image aligned to the right of a text paragraph [Fig.1].

Figure 1 - image float right

Figure 1 - Wrapping text with image aligned to the right using float

I made the image align to the right of the text allowing the paragraph to wrap around the image. This was acheived by using float: right. Below is the image markup with the style applied in green.

<img style="float: right;" src="gort.gif" alt="fig1" width="80" height="80" />

This is the fastest and easiest way to quickly add an image to a paragraph but sometimes it's nice to add a little space between text and images. This is called padding (the invisible space around the image). As you can see in figure 2 some of my text is actually crowding the image because I did not specify any padding.

Figure 2 - text crowding

Figure 2 - text crowding the image beause there is no padding

To prevent text from crowding the image I applied 5 pixels of padding to the left-side of the image. I chose 5 pixels because it's what looked best to me. There's really no set rule for how much padding to use. Just experiment and see what looks best for your particular article.

<img style="float: right; padding: 0px 0px 0px 5px;" src="gort.gif" alt="fig1" width="80" height="80" />

Figure 3 shows the result of padding in order to prevent text from crowding the image. This creates a better flow and more professional appearance.

Figure 3 - image padding creating space between the image and text

Figure 3 - Text wrap with padding

Note: I applied the padding according to the clockwise rule starting from the top of the image. For example, when I used padding: 0px 0px 0px 5px; I was specifying that the top, right, and bottom of the image would be zero (0) pixels, and the left-side would have 5 pixels. I could simplify this by just using padding: 5px; but then this would mean all sides of my image would have a padding of this number and could affect how the image looks in relation to the overall margins of my web page. Do what works best for you. My particular case required the longer way of writing it out.

Here is just an example of a float: left; padding: 3px 3px 0px 3px;

float left

<img style="float: left; padding: 3px 3px 0px 3px;" src="girl.gif" alt="girl crying" width="80" height="80" />

Page 2 - The CSS div float method to wrap text around images with captions >>



comments powered by Disqus