CSS Wrap / Float Text around a DIV or Image

SHARE
Learn how to force a DIV element to let text wrap text around itself. By default DIV element takes up all the width available to it. But CSS property “float” can help us.
SHARE

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.

Wrapping and floating text using CSS.

Wrapping and floating text using CSS.

BONUS TIP: Using float property you can adjust two or more DIV elements side-by-side (adjacent to each other)

my div 1

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.

my div 2

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.

Comments

  1. says

    In line 1 of the provided code snippet, in in style attribute of ‘div’, use of ‘margin’ property can be optimized.
    “margin : 10px ” is applied at the last and thus “margin-top : 10px” can be skipped, as anyways it would be overridden.

Leave a Reply

Your email address will not be published. Required fields are marked *