Footer covering all the elements above it ?

Question

When I use property "clear: both" in the css of rule using footer as element selecter then footer gives appropriate result but when I remove this property from the rule then footer starts covering all the elements which exist above it.

Here is the video showing the problem in screencast. http://screencast.com/t/NMSkF8VkM

Here is my HTML code

<!DOCTYPE html>
<html>
  <head>
    <title>Tushar Arora | Software Developer</title>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Noto+Sans&subset=devanagari,latin' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <header>
      <h1>Tushar Arora</h1>
      <h2>Software Developer</h2>
      <br/><br/>
      <h3> Tushar Arora</h3>
      <h4>Software Developer</h4>
    </header>
    <nav>
      <a href="index.html" class="selected">Main</a><br/>
      <a href="about.html">About This Site</a><br/>
      <a href="contact.html">Contact Me</a>
    </nav>
    <section>
    <div id="gallery">
      <ul id="unlst">
        <li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg"/></a></li>
        <li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg"/></a></li>
        <li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg"/></a></li>
        <li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg"/></a></li>
      </ul>
    </div>
    </section>
    <footer>
      <a href="https://www.facebook.com/tushar.arora.904"><img src="img/facebook-wrap.png"/></a>
      <a href="https://www.twitter.com"><img src="img/twitter-wrap.png"/></a>
      <p>&copy;Tushar Arora</p>
    </footer>
  </body>
</html>

And here is my CSS

header h3, header h4{

  color: red;
  font-family: 'Pacifico', cursive;
  font-size: 4em;
}

nav a{
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-family: 'Sigmar One', cursive;
}

nav a.selected{
  color:red;
}

nav a:hover{

  color: blue;
}

nav{
  margin: 20px;
  display: inline;
}

nav a{
  //float: left;
  //padding:10px;

}
#unlst{
  list-style: none;
}

#unlst img{
  width: 45%;
  min-width: 10%;
  float: left;
  padding: 10px;
  background-color: black;
  margin:10px;
}

#gallery{
  background-color: yellow;
}
footer{
  text-align:center;
  margin: 20px 0px 10px 0px;
  padding: 20px 0px 20px 0px;
  background-color: green;
  clear:both;
}

Answer 1 · 2015-10-30T18:50:23Z

October 30, 2015 6:50pm

That IS actually an acceptable way to fix it :)

Or:

section {
    overflow: hidden;
}

Because your <section> content is all floated some browsers require you to add some kind of clearfix to get it to display properly.

Good reference on this here: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

Answer 2 · 2015-11-04T22:22:02Z

November 4, 2015 10:22pm

Because you are floating your images they are taken out of your document flow. This causes their parent container (#unlst) to collapse and leave it with a height of 0px. It's parent #gallery will also collapse to a height of 0px leaving room for the footer to take up all of the space. That's why your images appear in (above) the footer. You can fix this by putting the following rules on your #gallery container:

#gallery {
  display: inline-block;
  width: 100%;

Inline-block will give it a height and width 100% will stretch it to full width.

Welcome to the Treehouse Community

Looking to learn something new?

Tushar Arora

Tushar Arora

Footer covering all the elements above it ?

2 Answers

Jonathan Watson

Jonathan Watson

Erwin Meesters

Erwin Meesters