CSS Float Example by TutorialsClass.com

Learn CSS Float with example by TutorialsClass.com

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
 
<div>
<img src="https://i2.wp.com/tutorialsclass.com/wp-content/uploads/2018/03/tc-sidebanner-v2.png?w=100" style="float:right; margin-left:15px;">
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae molestie nibh, a molestie arcu. Duis placerat mauris quis felis fermentum iaculis. Fusce vestibulum, arcu sit amet varius consequat, ante leo congue felis, eu blandit tellus diam vel tortor. Praesent eget diam nec metus lobortis vestibulum ut ut felis. Donec sollicitudin velit nec consectetur porttitor. Etiam metus magna, tempus et luctus ut, suscipit vel dolor. Nulla consequat urna et finibus mattis. Morbi eget ex nisi. Vestibulum ipsum ipsum, accumsan nec molestie ac, sagittis quis massa. Sed auctor tellus at aliquet venenatis.
 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu ligula sollicitudin, vestibulum justo in, cursus dui. Etiam vitae ante tristique, commodo erat et, bibendum leo. Praesent mollis efficitur felis non elementum. Fusce ut fringilla ex. Nunc quis lorem nec nisl maximus finibus. Praesent facilisis nunc in risus hendrerit vulputate. Vivamus diam arcu, tempus nec nibh tristique, pretium fringilla ligula. Etiam molestie mi vitae metus dignissim pretium. Cras tincidunt dolor ut lacus bibendum volutpat.
</div>
 
</body>
</html>