<img align="">

Attribute of

HTML Tags Guide To Adding Images To Your Web Documents

What does <img align=""> do?

Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.

Old Way to Wrap Text Around an Image

The old way of wrapping text around an image was to use the <img> attributes align="right" or align="left".

<!-- This may work in some browsers, but will break in others. -->

<img src="/wp-content/uploads/flamingo.jpg" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.

<!-- This may work in some browsers, but will break in others. -->

<img src="/wp-content/uploads/flamingo.jpg" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lorem et lectus facilisis lobortis eget vitae enim. Aliquam bibendum lacus urna, ac rutrum mauris vestibulum at. Fusce nec est quis elit tempus euismod ac id sapien. Fusce facilisis est lectus, vel volutpat nulla aliquet quis. Morbi tempor pretium velit at sollicitudin.

This is no longer supported in HTML5. The correct way to do this now is to use CSS.

(Wondering where to find lorem ipsum like this? Check out our sister site Dummy Text.com)

Wrapping Around an Image with CSS

Wrapping text around an image with CSS is easy. You simply float the image to the left or the right, and apply appropriate margins so that the text doesn’t smash up next to the image.

img {
 display: block;
}

img.wrap {
 max-width: 70%;
 margin: 30px 0px;
}

img.align-right {
 float: right;
 margin-left: 30px;
}

img.align-left {
 float: left;
 margin-right: 30px;
}

<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Vivamus id est metus. Donec hendrerit gravida ipsum, vitae pellentesque velit bibendum vitae. Praesent sit amet venenatis erat, vel pellentesque leo. Morbi nec nisi ultrices, vestibulum purus sed, rhoncus mauris. 

<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-right">
Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Donec sollicitudin, eros a venenatis malesuada, metus ante condimentum nisi, et viverra purus nisi in arcu. Donec congue est quis justo lacinia, et accumsan sapien ullamcorper. Mauris et odio ultricies nisi pellentesque aliquam. Curabitur massa eros, laoreet at dui eu, vehicula efficitur elit. Fusce imperdiet sit amet velit sed condimentum. Etiam nec augue lorem. In dignissim aliquet sem.

Note about Floats and Clearfix

When you apply a float CSS value to an element, something weird and unexpected happens. Its container element doesn’t recognize it as having any height. This can make it appear that the floated element is breaking out of its container.

You don’t notice this if the container matches the background. But if you put a border on it, it creates really annoying problems.

img {
 display: block;
}

img.wrap {
 max-width: 70%;
 margin: 30px 0px;
}

img.align-right {
 float: right;
 margin-left: 30px;
}

div.article-container {
 border: 5px solid red;
 margin: 5px;
 padding: 5px;
}

<div class="article-container">
<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-right">
Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.
</div>

#bad-float img {
display: block;
}
#bad-float img.wrap {
max-width: 70%;
margin: 30px 0px;
}
#bad-float img.align-right {
float: right;
margin-left: 30px;
}
#bad-float div.article-container {
border: 5px solid red;
margin: 5px;
padding: 5px;
}

Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.

The solution to this problem is usually called a “Clearfix.” The solution is (essentially) a “hack,” but it has become the completely standard way of dealing with the problem.

The Clearfix is just an additional set of CSS rules added to the container element which cause it to recognize the full height of the inner element. This is usually added as a distinct CSS class:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

When added to the above example…

img {
 display: block;
}

img.wrap {
 max-width: 70%;
 margin: 30px 0px;
}

img.align-right {
 float: right;
 margin-left: 30px;
}

div.article-container {
 border: 5px solid red;
 margin: 5px;
 padding: 5px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="article-container clearfix">
<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-right">
Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.
</div>

#good-float img {
display: block;
}
#good-float img.wrap {
max-width: 70%;
margin: 30px 0px;
}
#good-float img.align-right {
float: right;
margin-left: 30px;
}
#good-float div.article-container {
border: 5px solid red;
margin: 5px;
padding: 5px;
}

Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.