How to Wrap Text Around a DIV Element

By default, DIV element in HTML occupies the entire width available to it. That is to say that unless controlled, the default width of DIV is always 100%. As a result, DIV element pushes other elements in its way down.

If you control width of the DIV element (let’s say you make it 50%), although DIV will follow your command and occupy only 50% of width –but it will still not allow other elements to wrap around it. At times, we need to wrap text around a DIV. In such cases, CSS property float comes to our rescue. Float forces DIV to give space to other elements on its sides. Let’s see how to wrap text around a DIV.

<div style="float: left; margin-top: 10px; background-color: #ff0000; width: 100px; height: 100px; margin: 10px;">my div 1</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent magna tortor, tincidunt ac tristique sit amet, condimentum ut erat. Mauris sem mi, ultrices et hendrerit vitae, hendrerit non tortor. Aliquam erat volutpat. Morbi eget leo lorem, ut placerat nisl. Aenean auctor volutpat condimentum. Morbi adipiscing leo et felis faucibus suscipit nec at odio. Pellentesque convallis turpis non sapien facilisis quis volutpat magna venenatis. Etiam nisi metus, imperdiet vitae lobortis sit amet, pharetra ut leo.</p>

float property can have either left or right as value.