The float property is used to position content by “floating” an element either to the left or right, and is often used to position an image next to text.

In the following example, we have an image sitting inside a paragraph along with some text. We want the image to be to the left of the text, with some padding between the image and text block.

<p>
    <img decoding="async" id="my_image" src="https://www.1smartchicken.com/wp-content/uploads/chicken-icon.png" alt="1SMARTchicken" width="80" height="80" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus sed turpis tincidunt id aliquet risus feugiat in. Elementum curabitur vitae nunc sed velit dignissim sodales. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Aliquam malesuada bibendum arcu vitae elementum.
</p>

img {
    float: left;
    padding-right: 8px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus sed turpis tincidunt id aliquet risus feugiat in. Elementum curabitur vitae nunc sed velit dignissim sodales. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Aliquam malesuada bibendum arcu vitae elementum.

In this example we have the exact same setup with the image alongside some text in a paragraph. But this time we want to show the image to the right of the text with some padding between the image and text block.

<p>
    <img decoding="async" id="my_image" src="https://www.1smartchicken.com/wp-content/uploads/chicken-icon.png" alt="1SMARTchicken" width="80" height="80" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus sed turpis tincidunt id aliquet risus feugiat in. Elementum curabitur vitae nunc sed velit dignissim sodales. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Aliquam malesuada bibendum arcu vitae elementum.
</p>

img {
    float: right;
    padding-left: 8px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus sed turpis tincidunt id aliquet risus feugiat in. Elementum curabitur vitae nunc sed velit dignissim sodales. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Aliquam malesuada bibendum arcu vitae elementum.

There are times when you may have several elements that do not take up the width of the parent element, and you want them to sit next to one another to the left or right.

In the following example, the three elements are floated to the left and will sit on the same line, next to one another so long as the parent has enough width to show all of them horizontally. If not, it will drop the ones that don’t fit to the next line.

<div class="div_1">Div 1</div>
<div class="div_2">Div 2</div>
<div class="div_3">Div 3</div>

div {
    width: 80px;
    height: 80px;
    padding: 4px;
    background: red;
    border: black solid thin;
    float: left;
}

---