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.
Floating an Image
Left
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.
Right
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.
Floating a Series of Elements
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;
margin: 4px;
background: red;
float: left;
}
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
