why the border given at the top of the footer part is much further than desired?

Question

I have some codes in css and html. these codes works ok but have one css problem in copyright section. it is the border-top that i gave to "copyright" class. it is staying at the position much higher than i wanted. it shows above the "services" class. please give me some standard system of code along with the explanation why it happened so that i can apply in this html or css code.

Snippet:

body {
  width: 800px;
  margin: 0 auto;
}

.header {
  margin-bottom: 10px;
  overflow: hidden;
}

.main_menu {
  display: flex;
}

.main_menu .menuitems {
  list-style: none;
  padding: 10px;
}

.menuitems a {
  text-decoration: none;
}

.company_logo {
  float: left;
}

.nav {
  float: right;
}

.items {
  width: 200px;
  float: left;
}

.lower_part {
  float: left;
}

.about_us {
  float: left;
  width: 350px;
  margin-right: 50px;
}

.about_us_heading img {
  width: 30px;
  height: 30px;
}

.about_us_heading {
  display: flex;
  align-items: center;
}

.img1 {
  width: 80px;
  height: 80px;
}

.footer_part {
  width: 800px;
}

.footer {
  display: block;
  float: left;
  width: 240px;
  margin-right: 10px;
  padding-bottom: 80px;
}

.copyright {
  border-top: 1px solid red;
}

.copyright_section {
  float: left;
}

.social_icons {
  float: right;
}

.si {
  width: 35px;
  height: 35px;
}

<!DOCTYPE HTML>
<html>

<head>

  <title>My website</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="Style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body>

  <header class="header">
    <div class="company_logo">
      <h3>Fadelicious</h3>
    </div>
    <div>
      <nav class="nav">
        <ul class="main_menu">
          <li class="menuitems"><a href="#">Home</a></li>
          <li class="menuitems"><a href="#">Blog</a></li>
          <li class="menuitems"><a href="#">Portfolio</a></li>
          <li class="menuitems"><a href="#">Services</a></li>
          <li class="menuitems"><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section>

    <div class="description">
      <p class="desc_para">Hi! This is Fadelicious. New unique look for your blog & portfolio. Vivamus porttitor tristique augue a vestibulum. Maecenas sodales risus porta mi semper in auctor massa posuere.</p>
    </div>

    <div class="services">

      <div class="items">
        <img src="img/" />
        <h3>Package Design</h3>
        <p class="item_para">Praesent erat anteport hanip, condimentum quis facilisisac condimentum in ipsum.</p>
      </div>

      <div class="items">
        <img src="img/" />
        <h3>Web Design</h3>
        <p class="item_para">Duis quam ipsum, pharetra nec iaculis non, laoreet et nunc. Ut luctus justo velerat lacinia.</p>
      </div>

      <div class="items">
        <img src="img/" />
        <h3>E-Commerce</h3>
        <p class="item_para">Sed sit amet tortor vel risus volutpat pretium non at estar. Maecenas vitae lectus moles</p>
      </div>

      <div class="items">
        <img src="img/" />
        <h3>Full Support</h3>
        <p class="item_para">Curabitur nulla antenov, ullamcorper eu iaculis utar, convallis ac massa.</p>
      </div>

    </div>

    <div class="lower_part">

      <div class="about_us">
        <div class="about_us_heading">
          <img src="img/" />
          <h3>About Us</h3>
        </div>
        <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          <p>

            <p>Ut enim ad minima veniam, quis nostrum exercitationem ul lam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
      </div>

      <div class="about_us">

        <h3>Latest Work</h3>
        <div class="latest_img">
          <img class="img1" src="img/" />
          <img class="img1" src="img/" />
          <img class="img1" src="img/" />
          <img class="img1" src="img/" />
        </div>
      </div>

    </div>

  </section>

  <footer>
    <div class="footer_part">
      <div class="footer">
        <h3>Recent Posts</h3>
        <ul class="list_of_items1">
          <li class="list_items1"><a>Duis id tellus at eros tempor imper.</a></li>
          <li class="list_items1"><a>Aenean ligula nisl, fermentum vel lobortis id, scelerisque at lorem.</a></li>
          <li class="list_items1"><a>Suspendisse nec neque ut nunc rhoncus sodales.</a></li>
          <li class="list_items1"><a>Duis id Nam pulvinar faucibus dui.</a></li>
          <li class="list_items1"><a>Pellentesque pulvinar sagittis.</a></li>
        </ul>
      </div>
      <div class="footer">
        <h3>Archives</h3>
        <ul class="list_of_items2">
          <li class="list_items2"><a>January 2010</a></li>
          <li class="list_items2"><a>February 2010</a></li>
          <li class="list_items2"><a>March 2010</a></li>
          <li class="list_items2"><a>April 2010</a></li>
          <li class="list_items2"><a>May 2010</a></li>
          <li class="list_items2"><a>June 2010</a></li>
        </ul>
      </div>

      <div class="footer">
        <h3>Twitter</h3>
        <p>Sed ut perspiciatis unde omnis iste natus, error sit voluptatem accusantium doloremque laudantium, totam rem aperiamea. 3 hours ago </p>
        <p>@jacquelinecharl</p>
      </div>

    </div>

    <div class="copyright">

      <div class="copyright_section">
        <p>© Copyright 2010 Starlight. All Right Reserved</p>
      </div>
      <div class="social_icons">
        <img class="si" src="img/">
        <img class="si" src="img/">
        <img class="si" src="img/">
        <img class="si" src="img/">
        <img class="si" src="img/">
      </div>

    </div>
  </footer>

</body>

</html>

i don't know which float in the class you are talking about. — Asif Chowdhury, Mar 11 '19 at 13:15
Set `clear: left` on `.copyright`. Learn more about floating elements [here](https://www.w3schools.com/css/css_float.asp) — Jake, Mar 11 '19 at 13:16

score 0 · Answer 1 · answered Mar 11 '19 at 13:19

Note: Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).

From w3schools

To clear everything inside section, use the following code:

section::after {
  content: '';
  display: block;
  clear: both;
}

why the border given at the top of the footer part is much further than desired?

1 Answers1