In this article, we are going to talk about CSS position, and normal flow of floats
In HTML, there are two types of elements, one is inline the other is block. For example, we create an index.html with image and paragraphs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<img src="dog.jpg" width="200">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione ea, nemo sequi molestias tempore sit aut suscipit quia laborum, cumque nam facere. Dolorum maiores cupiditate temporibus non ea voluptate rem. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, quibusdam nobis nam culpa nemo odit, consequatur eligendi ut aspernatur, recusandae fuga perferendis earum consequuntur animi eos ipsa corporis deserunt odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum optio earum, reprehenderit omnis autem, voluptas iste nisi illo fuga deserunt adipisci nam rerum! Alias dignissimos voluptatibus laboriosam officia minima nulla?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione ea, nemo sequi molestias tempore sit aut suscipit quia laborum, cumque nam facere. Dolorum maiores cupiditate temporibus non ea voluptate rem. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, quibusdam nobis nam culpa nemo odit, consequatur eligendi ut aspernatur, recusandae fuga perferendis earum consequuntur animi eos ipsa corporis deserunt odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum optio earum, reprehenderit omnis autem, voluptas iste nisi illo fuga deserunt adipisci nam rerum! Alias dignissimos voluptatibus laboriosam officia minima nulla?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione ea, nemo sequi molestias tempore sit aut suscipit quia laborum, cumque nam facere. Dolorum maiores cupiditate temporibus non ea voluptate rem. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, quibusdam nobis nam culpa nemo odit, consequatur eligendi ut aspernatur, recusandae fuga perferendis earum consequuntur animi eos ipsa corporis deserunt odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum optio earum, reprehenderit omnis autem, voluptas iste nisi illo fuga deserunt adipisci nam rerum! Alias dignissimos voluptatibus laboriosam officia minima nulla?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione ea, nemo sequi molestias tempore sit aut suscipit quia laborum, cumque nam facere. Dolorum maiores cupiditate temporibus non ea voluptate rem. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, quibusdam nobis nam culpa nemo odit, consequatur eligendi ut aspernatur, recusandae fuga perferendis earum consequuntur animi eos ipsa corporis deserunt odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum optio earum, reprehenderit omnis autem, voluptas iste nisi illo fuga deserunt adipisci nam rerum! Alias dignissimos voluptatibus laboriosam officia minima nulla?</p>
</div>
</body>
</html>
Create a style wrapper style.
.wrapper{
background-color: beige;
padding: 30px;
max-width: 960px;
margin: auto;
}
#css #react #design #web-development #programming
2.20 GEEK