Attribute of
<img>
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.

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. 

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. 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> 
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> 
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.

Values of the align Attribute

Value Name Notes
right The "right" value of the align attribute placed the image to the right side of the containing element, allowing the text to flow on the left side of the image.
left The "left" value of the align attribute placed the image to the left side of the containing element, allowing the text to flow on the right side of the image.

All Attributes of img Element

Attribute name Values Notes
height Identifies the intrinsic height of an image file, in CSS pixels.
srcset list of sources Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.
align right
left
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.
alt text Defines alternate text, which may be presented in place of the image.
border pixels Previously used to define a border on an image element. It has been deprecated and should no longer be used.
controls Toggled media player controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are now deprecated.
dynsrc
hspace Previously used to add horizontal space on both side of an image. It is now deprecated.
ismap Identifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.
longdesc Defines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.
loop Previously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.
lowsrc Specified a smaller or lower-quality version of an image.
name Identified the image or provided additional information about it. Deprecated in HTML 4.0 in favor of other attributes.
naturalsizeflag This attribute does nothing. It was once used by a proprietary software system.
nosave Was intended to prevent users from downloading an image. Was never a part of the HTML specification, and not widely implemented.
start fileopen
mouseover
suppress Used by the now-defunct Netscape browser to suppress the display of image prior to image download completion.
usemap Specifies a client-side image map to be used with the image.
width Indicates the intrinsic width of the image, in CSS pixels.
src Specifies the URL of an image to be displayed.