float: left and right
In the past, the float property was used for layout control; however, these days, the display property is more popular for managing a layout. The float property is still used in some situations. One of its use cases is to set the position of an image inside a long text element.
When you set float: left or float: right in an image element, the text that is in the same line as the image element's line is wrapped around the image.
Practice
Objective:
Test how the float property works for image elements
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file. In this practice, we used the image from the previous practice.
chapter11.html
<h2>float: left or right</h2>
<p>
<img src="img/salad.jpg" style="height: 50px; margin: 2px; float: left"><b>float: left </b>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
<img src="img/salad.jpg" style="height: 50px; margin: 2px; float: right"><b>float: right </b>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</body>
</html>
2. Check the result with a browser
- Open chapter11.html with a browser.
- You can see that the text is wrapped around the image.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.