Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
body{
font-family: "Comic Sans MS", sans-serif;
}
.left{
background-image: url("img/image4.jpeg");
color: white;
padding: 10px;
margin: 5px;
float: left;
}
.right{
background-image: url("img/image4.jpeg");
color: white;
padding: 10px;
margin: 5px;
float: right;
}
.clear{
background-image: url("img/image4.jpeg");
color: white;
text-align: center;
padding: 5px;
margin: 5px;
clear: both;
}
</style>
</head>
<body>
<div class="left">
<h1>Float Left</h1>
</div>
<div class="right">
<h1>Float Right</h1>
</div>
<div>
<h1 class="clear">clear me</h1>
</div>
<!-- NEWS SECTION -->
<div class="news">
<img src="img/image3.jpeg" width="300" height="150">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet animi commodi cum eaque iste mollitia quo voluptas! Adipisci aliquam blanditiis, commodi distinctio dolores doloribus dolorum eaque facilis laborum minima modi molestias, necessitatibus nobis perspiciatis quibusdam sint sit tempora voluptatum? Aliquid debitis facere inventore iusto, possimus quas ratione repellendus voluptatem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam assumenda, autem consectetur deleniti dignissimos enim, error ex fugit hic ipsa iusto labore nisi non officia officiis provident rem repellat soluta tempora temporibus, velit voluptas voluptate? Adipisci architecto dicta magnam.</p>
</div>
</body>
</html>
Output:
