BHS DESIGN - Text wrapping an image

Page Info

Page Title: Text wrapping an image
Description: Image wrapped by text realized with CSS
Author: Dumb Genius
Submission Date: 12-04-2006 23:34

Rating & Comments

View or add comments:

(1)
Average members rating:

9.00

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas accumsan. Suspendisse sit amet risus. Sed facilisis erat vitae erat. Aliquam adipiscing. Quisque commodo rutrum nisl. Praesent vitae quam. Integer fermentum magna ut enim. Curabitur augue ante, imperdiet vel, ornare eget, accumsan ut, ante. Quisque in risus. Morbi porta felis sit amet ligula. Fusce aliquet dapibus justo. Nullam sagittis turpis. Cras gravida mi non ipsum. Duis et velit vel augue viverra mollis. Duis magna nisl, volutpat vel, ultrices eget, varius non, massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras quam massa, convallis eget, hendrerit facilisis, congue at, leo. Nullam fermentum, risus id suscipit egestas, justo ligula fringilla ipsum, vitae aliquet urna leo non wisi. Etiam mollis nisl varius ante eleifend elementum. Etiam neque felis, bibendum in, adipiscing eget, gravida fringilla, nisl. Aliquam placerat neque. Aliquam ipsum ante, hendrerit non, molestie feugiat, bibendum at, metus. Nullam sed diam. Nam fringilla nulla nec nunc. Maecenas quis nulla non mauris facilisis ornare. Aliquam erat volutpat.

To wrap an image by some text like the example below use the following:

HTML

Code :
// hide source code
// hide line numbers



1  <div class="imgintext"><img src="http://www.domain.com/image_path/image_name.gif" alt="" /></div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas accumsan. [...]

CSS

Code :
// hide source code
// hide line numbers



1  .imgintext    {
2      position: relative;
3      float: left; 
4      margin: 5px 10px 5px 10px; 
5

Note: it is important that in the HTML code you don't use an end of line or any space between the closind div tag and the beginning of the text:

Code :
// hide source code
// hide line numbers



1  </div>Lore

The margin property values can be changed to anything you want.
You can apply the same method to place the image on the right. In this case use float: right; instead.

Donation:

If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months.