Float And Clear Explained
<!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">
<title>Alignment</title>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Zen Kurenaido', sans-serif;
}
.container {
width: 900px;
border: 3px solid purple;
margin: 30px auto;
background-color: rgb(63, 57, 57);
}
.item {
border: 3px solid rgb(88, 27, 68);
margin: 12px 3px;
padding: 12px 3px;
background: rgb(190, 184, 190);
}
#fruit {
float: left;
width: 48%;
}
#computer {
float: right;
width: 48%;
}
#stationary {
/* float: left; */
clear: both;
width: 100%;
}
p,
h3 {
text-align: right;
text-align: left;
text-align: center;
text-align: justify;
}
h1 {
margin: 23px auto;
width: fit-content;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to my Store</h1>
<div id="fruit" class="item">
<h3>Fruits</h3>
<p id="fruitPara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo nulla
nihil minus, incidunt deleniti fuga ducimus maxime, suscipit voluptatibus ullam eum enim repudiandae
laboriosam placeat possimus nesciunt esse accusamus? Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Doloremque consectetur tenetur ea adipisci fugit cupiditate aspernatur, qui nisi perspiciatis quas
veniam illo repellat quis quaerat, quod quibusdam ducimus unde reiciendis, quae necessitatibus odit
temporibus! </p>
</div>
<div id="computer" class="item">
<h3>Computer</h3>
<p id="computerPara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
nulla nihil minus, incidunt deleniti fuga ducimus maxime, suscipit voluptatibus ullam eum enim
repudiandae laboriosam placeat possimus nesciunt esse Lorem ipsum dolor sit amet consectetur adipisicing
elit. Eos culpa quos delectus numquam, aut eaque distinctio harum vero tenetur, obcaecati alias
consectetur pariatur velit? Porro a similique temporibus aliquam facere vero Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Iusto laudantium asperiores natus et molestiae quaerat, harum impedit at
nulla veniam saepe laborum tempore porro nemo non itaque facere labore magni ducimus vitae sed mollitia.
voluptas cum recusandae. accusamus?</p>
</div>
<div id="stationary" class="item">
<h3>Stationary</h3>
<p id="stationaryPara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
nulla nihil minus, incidunt deleniti fuga ducimus maxime, suscipit voluptatibus ullam eum enim
repudiandae laboriosam placeat possimus nesciunt esse accusamus?</p>
</div>
<div id="glasses" class="item">
<h3>Glasses</h3>
<p id="glassesPara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
nulla nihil minus, incidunt deleniti fuga ducimus maxime, suscipit voluptatibus ullam eum enim
repudiandae laboriosam placeat possimus nesciunt esse accusamus?</p>
</div>
</div>
</body>
</html>
Comments
Post a Comment