Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

USe CSS to create an image text wrap effect

Use CSS and div tags to perfectly position text to create an image text wrap effect.


GETTING TEXT TO fit the contours of an image is not a simple one-element action.

Div tags, by their very nature, use straight edges, so in order to create the text wrap illusion, a number of well-positioned and styled tags need to be employed. First, create a container tag (Insert>Layout Objects>Div Tag>New CSS Style>Advanced, name the tag, ie ‘#container’, Box and add width and height) that is the same size as the image, and place the image as the background image. Now insert another div tag, but this time insert ‘after start of tag’ just created, click New CSS Style, name the tag, ie ‘#topline’ and press OK. Now select a font, font size and colour, then head to Box, add in a width and height before making sure that Float is set to Left. Finally, add in some padding. Repeat the process and create additional div tags to accommodate the remaining text. Each tag needs to be placed after the end of the previous tag. This will help create the wrap effect. Add as many div tags as needed to create the wrap effect. The individual tags should be a similar length, or less, to the container tag, so when floated left they do not sit side by side but on top of one another. Finally, width, height and font size will need to be adjusted to fit, as well as padding added to the right to ensure that text does not overlay any parts of the image.