-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFloatClear.html
91 lines (79 loc) · 3.01 KB
/
FloatClear.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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>Float and Clear</title>
<style>
.container
{
width: 1000px;
border: 3px solid purple;
margin: auto;
background-color: sandybrown;
text-align: justify;
}
.item
{
border: 3px solid gray;
margin: 12px 3px;
padding: 12px 3px;
background-color: aquamarine;
}
#fruit
{
float: left;
width: 48%;
}
#stationary
{
float: left;
width: 48%;
}
#computer
{
float: left;
width: 100%;
clear: both;
}
#glasses
{
width: 100%;
clear: both;
}
p,h3
{
text-align:justify;
}
</style>
</head>
<body>
<div class="container">
<h1 style="border: solid; margin: auto;">Welcome to my Store</h1>
<div id="fruit" class="item">
<h3>Fruits</h3>
<p id="fp" class="pc">Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Excepturi atque quisquam commodi?Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus doloremque aliquam assumenda. Aperiam, explicabo. Sunt quaerat culpa unde sint ipsam fugit ratione exercitationem, consectetur cum!
Omnis, nihil culpa sit magni alias molestiae ratione cum.</p>
</div>
<div id="stationary" class="item">
<h3>Stationary</h3>
<p class="sp" class="pc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, facilis reiciendis ducimus vel vero laboriosam nisi expedita quibusdam rem ullam unde doloremque?
Sequi minima, recusandae fuga optio eligendi ratione. Doloribus vero magnam vitae!lorem34 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis nesciunt eum quia magni deserunt voluptates natus nemo. Adipisci excepturi dignissimos voluptas quam, fugiat optio nihil molestiae
explicabo beatae nostrum illo!
</p>
</div>
<div id="computer" class="item">
<h3>Computer</h3>
<p id="cp" class="pc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet aliquid architecto asperiores maiores
animi ut cupiditate accusamus unde obcaecati nemo?</p>
</div>
<div id="glasses" class="item">
<h3>Glasses</h3>
<p id="gp" class="pc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet aliquid architecto asperiores maiores
animi ut cupiditate accusamus unde obcaecati nemo?</p>
</div>
</div>
</body>
</html>