Why is my footer acting like it contains other divs that aren't actually child elements?

Question

I was trying to get the footer section of my site to appear beneath the main content on the page, but after I was having issues getting it to appear in the correct place, I added a background colour to it so I could better see what was going on.

I noticed that it seems to be wrapping around all the child divs of my useswrapper div (ignoring the heading and horizontal rule above them for some reason).

As you can see in my code below, the footer section is a couple of lines down from those divs and contains literally nothing other than a paragraph tag at the moment, so I have no idea what it's doing or why it's doing it?

I did try searching for an answer to this question, but everything I found seemed to be about divs not staying in the divs they're supposed to, while this is two unrelated divs (besides being children of the same element) combining for no apparent reason.

My code:

#wrapper {
  text-align: center;
}
#useswrapper {
  width: 80%;
  margin: 0 auto;
}
.usesdiv {
  width: 21%;
  float: left;
  padding-left: 25px;
  padding-right: 25px;
}
header,
body {
  text-align: center;
}
.usesimg {
  width: 100%;
  border-radius: 20px;
}
.navlist li {
  display: inline;
  margin: 0;
  padding: 0;
}
.navlist li a {
  text-decoration: none;
  color: white;
  padding-left: 0.3%;
  padding-right: 0.3%;
}
.navlist {
  margin-left: -3em;
  padding: 3px;
}
#mainnav {
  background: #B36868;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  border-radius: 1em;
}
hr {
  width: 90%;
  color: #B36868;
}
h1,
h2,
h3 {
  color: #B36868;
  font-family: 'Pacifico', cursive;
}
h3 {
  font-size: 1.5em;
}
p,
a {
  font-family: 'Old Standard TT', serif;
}
#purchasepane {
  width: 40%;
  margin: 0 auto;
  background: #B36868;
  border-radius: 15px;
  padding-bottom: 1px;
  border-style: solid;
  border-width: 6px;
  border-color: #A43737;
}
.boxtitle {
  color: white;
  margin-top: 0%;
}
#quantity {
  color: white;
}
footer {
  background: grey;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  border-radius: 1em;
}

<html>

<head>
  <title>The Goodwill Asbestos Corporation</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
</head>

<body>
  <div id="wrapper">

    <header>
      <img src="images/logo.jpg" id="logo">
      <nav id="mainnav">
        <ul class="navlist">
          <li><a href="#">Cart</a>
          </li>
          <li><a href="#">Login</a>
          </li>
          <li><a href="#">Sign Up</a>
          </li>
        </ul>
      </nav>
      <div id="intro">
        <p>Are you looking for a cheap alternative to artificial snow? Are you looking for a way to draw out your talcum powder supply? Perhaps you're in search of a safer cigarette filter?</p>
        <p>Whatever your issue, The Goodwill Asbestos Corporation has you covered.</p>
      </div>
    </header>

    <div id="purchasepane">
      <h2 class="boxtitle">Purchase Now!</h2>
      <form action="#">
        <span id="quantity">Quantity (Kg):</span> 
        <input type='text' name="quant">
        <input type="submit" value="Add to Cart">
      </form>
    </div>

    <div id="useswrapper">
      <h2>Uses of Asbestos</h2>
      <hr>
      <div id="snow" class="usesdiv">
        <h3>Artificial Snow</h3>
        <img src="images/snow.jpg" class="usesimg">
      </div>
      <div id="talc" class="usesdiv">
        <h3>Talcum Enhancer</h3>
        <img src="images/talc.jpg" class="usesimg">
      </div>
      <div id="filters" class="usesdiv">
        <h3>Cigarette Filters</h3>
        <img src="images/filters.jpg" class="usesimg">
      </div>
      <div id="dandruff" class="usesdiv" class="usesimg">
        <h3>Prank Dandruff</h3>
        <img src="images/dandruff.jpg" class="usesimg">
      </div>
      <div id="sweetner" class="usesdiv" class="usesimg">
        <h3>Beverage Sweetner</h3>
        <img src="images/sweetner.jpg" class="usesimg">
      </div>
      <div id="toothpaste" class="usesdiv">
        <h3>Toothpaste Texture</h3>
        <img src="images/toothpaste.jpg" class="usesimg">
      </div>
      <div id="toy" class="usesdiv">
        <h3>Childrens Toy</h3>
        <img src="images/toy.jpg" class="usesimg">
      </div>
      <div id="sinus" class="usesdiv">
        <h3>Sinus Cleaner</h3>
        <img src="images/sinus.jpg" class="usesimg">
      </div>
    </div>

    <footer>
      <p>Copyright 2016</p>
    </footer>

  </div>
</body>

</html>

because you dont use `height` on `useswrapper` thats why your footer place at center, then the `float` div dont have `height`. thats why. — mmativ, Mar 15 '16 at 02:10
maybe you can use `min-height` on `useswrapper ` or set your `footer` to `absolute` position. — mmativ, Mar 15 '16 at 02:11

score 0 · Accepted Answer · edited May 23 '17 at 12:24

Add overflow: auto to #useswrapper.

You need a clearfix solution for your floated elements.

The child elements of the #useswrapper div are floated and, therefore, removed from the document flow. Your child divs have this code:

.usesdiv { float: left; }

When you remove an element from the document flow the parent container doesn't know it exists and no height is created to accommodate the child. The footer then positions itself right underneath that box with less-than-expected height.

For an illustration, add a border to the original code:

#useswrapper { border: 1px solid red; }

Then add the clearfix:

#useswrapper { overflow: auto; }

Clearfix methods are available to force the parent to recognize the floated child. One such method is overflow: auto. There are many others.

More details here: How Floats are Positioned (MDN)

For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. — Michael Benjamin, Dec 23 '16 at 18:18

score 0 · Answer 2 · edited Mar 16 '16 at 10:56

0

When you use float: left for the elements above the footer, you need to use clear: both; in the css for the footer. This will keep the floating elements from getting around your footer.

edited Mar 16 '16 at 10:56

Hans Roerdinkholder

3,000
1
20
30

answered Mar 15 '16 at 02:35

K.H.

9
3

I suspect this will be flagged for deletion since there is no context and sounds more like a suggestion than a solution. – tumultous_rooster Mar 15 '16 at 02:42

score -1 · Answer 3 · answered Mar 15 '16 at 02:16

The problem seem to be #useswrapper does not contain its child div elements. I don't what is the cause but the fix is adding the class has-content to #useswrapper with has-content defined:

.has-content::after, .has-content::before
    {
    content: " ";
    display: table;
}

.has-content::after {
    clear: both;
}

#wrapper {
 text-align: center;
}

#useswrapper {
 width: 80%;
 margin:0 auto;
}

.usesdiv {
 width:21%;
 float:left;
 padding-left: 25px;
 padding-right:25px;
}

header, body {
 text-align: center;
}

.usesimg {
 width: 100%;
 border-radius: 20px;
}

.navlist li {
 display: inline;
 margin: 0;
 padding: 0;
}

.navlist li a {
 text-decoration: none;
 color: white;
 padding-left: 0.3%;
 padding-right: 0.3%;
}

.navlist {
 margin-left: -3em;
 padding:3px;
}

#mainnav {
 background: #B36868;
 width: 80%;
 text-align: center;
 margin: 0 auto;
 padding: 0;
 border-radius: 1em;
}


hr {
 width: 90%;
 color:#B36868;
}

h1, h2, h3 {
 color: #B36868;
 font-family: 'Pacifico', cursive;
}

h3 {
 font-size: 1.5em;
}

p, a {
 font-family: 'Old Standard TT', serif;
}

#purchasepane {
 width:40%;
 margin: 0 auto;
 background:#B36868;
 border-radius: 15px;
 padding-bottom: 1px;
 border-style: solid;
 border-width: 6px;
 border-color: #A43737;
}

.boxtitle {
 color: white;
 margin-top: 0%;
}

#quantity {
 color:white;
}



footer {
 background: grey;
 width: 80%;
 text-align: center;
 margin: 0 auto;
 padding: 0;
 border-radius: 1em;
}


.has-content::after, .has-content::before
 {
 content: " ";
 display: table;
}

.has-content::after {
 clear: both;
}

<html>
 <head>
  <title>The Goodwill Asbestos Corporation</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
 </head>
 <body>
  <div id="wrapper">

   <header>
    <img src="images/logo.jpg" id="logo">
    <nav id="mainnav">
     <ul class="navlist">
      <li><a href="#">Cart</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign Up</a></li>
     </ul>
    </nav>
    <div id="intro">
     <p>Are you looking for a cheap alternative to artificial snow? Are you looking for a way to draw out your talcum powder supply? Perhaps you're in search of a safer cigarette filter?</p>
     <p>Whatever your issue, The Goodwill Asbestos Corporation has you covered.</p>
    </div>
   </header>

   <div id="purchasepane">
    <h2 class="boxtitle">Purchase Now!</h2>
    <form action="#">
     <span id="quantity">Quantity (Kg):</span> <input type='text' name="quant">
     <input type="submit" value="Add to Cart">
    </form>
   </div>

   <div id="useswrapper" class="has-content">
    <h2>Uses of Asbestos</h2>
    <hr>
    <div id="snow" class="usesdiv">
     <h3>Artificial Snow</h3>
     <img src="images/snow.jpg" class="usesimg">
    </div>
    <div id="talc" class="usesdiv">
     <h3>Talcum Enhancer</h3>
     <img src="images/talc.jpg" class="usesimg">
    </div>
    <div id="filters" class="usesdiv">
     <h3>Cigarette Filters</h3>
     <img src="images/filters.jpg" class="usesimg">
    </div>
    <div id="dandruff" class="usesdiv" class="usesimg">
     <h3>Prank Dandruff</h3>
     <img src="images/dandruff.jpg" class="usesimg">
    </div>
    <div id="sweetner" class="usesdiv" class="usesimg">
     <h3>Beverage Sweetner</h3>
     <img src="images/sweetner.jpg" class="usesimg">
    </div>
    <div id="toothpaste" class="usesdiv">
     <h3>Toothpaste Texture</h3>
     <img src="images/toothpaste.jpg" class="usesimg">
    </div>
    <div id="toy" class="usesdiv">
     <h3>Childrens Toy</h3>
     <img src="images/toy.jpg" class="usesimg">
    </div>
    <div id="sinus" class="usesdiv">
     <h3>Sinus Cleaner</h3>
     <img src="images/sinus.jpg" class="usesimg">
    </div>
   </div>

   <footer>
    <p>Copyright 2016</p>
   </footer>

  </div>
 </body>
</html>

Why is my footer acting like it contains other divs that aren't actually child elements?

3 Answers3