css float left right
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{padding: 0;
margin: 0;}
body{
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
.maincon{
margin: auto;
width: 1200px;
background-color: rgb(250, 212, 212);
border: rgb(8, 204, 230) solid 4px;
height: 50%;
font-size: 19px;
line-height: 30px;
}
.item{
background-color: #fff;
border: 4px solid rgb(240, 3, 3);
/* margin-top: 10px; */
margin: 10px;
padding: 12px 6px;
}
#computer{
width: 400px;
float: left;
}
#mobile{
width: 400px;
float: left;
}
#Laptop{
clear: both;
/* /* width: 350px; */
/* float: left; */
}
#head{
width: 40%;
margin: auto;
margin-top: 10px;
}
#red{width: 300px;
height: 300px;
background-color: red;
float: left;}
#green{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
#pink{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.circle{
margin: 10px;
border: 2px solid gray;
border-radius: 163px;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float in CSS</title>
</head>
<body>
<div class="maincon">
<h1 id="head">My freist CSS With Float</h1>
<div id="computer" class="item">
<h2>Computer</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum doloremque, ut, voluptas eos sequi repellat quod minima autem tenetur, incidunt et quibusdam amet. Ad, magni omnis</p>
</div>
<div id="mobile" class="item">
<h2>Mobile</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum illo quas, minima ipsa sit recusandae explicabo sapiente ut animi rem, perferendis omnis, officia ad sed illum enim minus? Quidem suscipit ratione blanditiis nesciunt, pariatur quia amet! Voluptatem sequi eos iure </p>
</div>
<div id="Laptop" class="item">
<h2>Laptop</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum illo quas, minima ipsa sit recusandae explicabo sapiente ut animi rem, perferendis omnis, officia ad sed illum enim minus? Quidem suscipit ratione blanditiis nesciunt, pariatur quia amet! Voluptatem sequi eos iure.</p>
</div>
</div>
<div id="red" class="circle"></div>
<div id="green" class="circle"></div>
<div id="pink" class="circle"></div>
<script>
document.getElementById('green').onclick=function() {
document.getElementById('Laptop').innerHTML='ok';
}
</script>
</body>
</html>
Comments