Earlier today while working on an e-commerce store for a client I was adding a couple simple content pages such as the typical “About Us” page. Anyhow I don’t use CSS on a daily basis so I typically forget the various syntax and/or tags that I need to use to accomplish certain tasks. In this case I needed to add a couple head shot images to the bio section of the About Us page and wanted the text to wrap around the head shot images. This is easy to do but I wanted to note for others and for future reference for myself.
Use CSS To Wrap Text Around An Image Inside A Paragraph:
Below I will show a couple different examples starting with an example of two paragraphs of text displayed after inserting them into a simple HTML editor and saving. After this initial example I will show what happens if you simply insert an image into the paragraph and how it would obviously not be the desired outcome and finally after that how you can inset the image with a couple additions to the HTML img tag so the text will wrap around the image and be much more appealing in terms of how it looks.
Example Of Two Paragraphs Of Text Where Image Needs To Be Inserted:
With the above example text we want to add an image to the start of each paragraph. The first example below is how it would look if you just used the typical img tag displayed below.
Example HTML IMG Tag Where Text Will Not Wrap Around Image:
- <img src="images/headshot.jpg">
As you can see the above example is not very appealing. Below we show how if you use the IMG tag below the text will wrap around the image and it looks much better.
Example IMG Tag Using CSS Where Text Will Wrap Around Image:
- <img style="float: left; padding: 5px 5px 5px 5px;" src="images/headshot.jpg" width="50" height="50" />
As you can see the above example looks much better than the first one with images added as it fills up the space much better when the text wraps around the images. This is all done using CSS and the float option. If you were to specify float right instead of the current float left the image would be sitting in the top right corner of the paragraph with the text still wrapped around it nicely. I also made the image smaller by specifying width and height. The padding specified above is the space on each side of the image so you can raise or lower the padding numbers to add or take away space on each of the four sides of the image inserted into the paragraph. The first pixel specification to the right of padding is the padding on the top side of the image, the second pixel specification is the right side of the image, the third pixel specification is the padding on the bottom of the image, and the last pixel specification is the padding on the left side of the image.