FSW_10_July/float.html at main · CodeKul/FSW_10_July · GitHub

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
<html>
  <head>
    <title>Float</title>
    <style>
      ul {
        background-color: gray;
        overflow: hidden;
      }
      li {
        /* background-color: bisque; */
        float: left;
        padding: 2%;
      }
      .sub{
        height: 200px;
        width: 200px;
        background-color: green;
        margin: 1%;
        float: left;
      }
    </style>
  </head>
  <body>
    <!-- put your vertical element in horizontal -->
    <ul>
      <li>Home</li>
      <li>About us</li>
      <li>Help</li>
      <li>Services</li>
    </ul>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam nemo
      minima quam! Itaque odit quas voluptatum consequuntur consectetur. Animi
      iusto debitis, deleniti facere quidem ea magnam quod, atque nostrum porro,
      vel sapiente. Dolore, accusamus pariatur assumenda quaerat tempora impedit
      deleniti nihil reprehenderit amet ea debitis quos explicabo voluptas
      maiores delectus sed aliquid consequuntur quas nulla sunt fuga, nemo
      doloribus incidunt? Fuga reprehenderit explicabo praesentium asperiores
      quisquam amet nostrum dolorum, obcaecati saepe maxime qui, molestiae
      tempora voluptatem. Aspernatur enim voluptatibus consequuntur, quisquam
      aut, modi ut praesentium voluptas ab veniam porro sunt excepturi impedit,
      reprehenderit aliquam iusto dolor labore assumenda corrupti temporibus?
    </p>
    <div class="main" style="overflow: hidden;">
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, ipsam, est quisquam tempora nisi eveniet minima illo molestiae ullam ex asperiores aliquam consequuntur sint ratione officiis ipsum a officia omnis, porro vitae exercitationem harum eaque at. Facere error iusto, voluptatibus laudantium praesentium ad dolor nobis, eveniet atque provident culpa unde, placeat reprehenderit incidunt quas ducimus debitis quaerat expedita maxime aliquam temporibus sequi obcaecati. Ipsa, eius labore iste consequatur provident esse officia quasi alias. Nemo unde saepe explicabo, nisi minus voluptates aliquid quis corporis cupiditate dolores corrupti illum delectus eligendi aperiam ex molestiae! Magnam itaque deleniti impedit nemo atque perferendis praesentium?</p>
  </body>
</html>