Reputation: 254

Third div element hidden beneath footer

This third div element hidden beneath footer as seen here: https://www.screencast.com/t/FAb4WyXfR

How do I get this third div element to show in its entirety?

CSS / HTML :

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

.price_by_night {
  color: #FF5A5F;
  border: 4px solid #FF5A5F;
  border-radius: 50%;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  margin: 0;
  float: right;
  line-height: 60px;
}

.information {
  height: 80px;
  border-top: #DDDDDD 1px solid;
  border-bottom: #DDDDDD 1px solid;
}

.max_guest {
  background-image: url("images/icon_group.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_rooms {
  background-image: url("images/icon_bed.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_bathrooms {
  background-image: url("images/icon_bath.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  height: auto;
  display: inline-block;
  margin: 7px;
  line-height: 100px;
  text-align: center;
}

.user {
  margin-bottom: 10px;
}

.description {
  text-align: left;
  float: left;
}

/*footer*/
footer {
    position:fixed;
    height:60px;
    width:100%;
    line-height:60px;
    border-top: solid 1px #CCCCCC;
    bottom:0px;
    background-color:white;
    text-align:center;
}

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="8-places.css" media="all">
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
  </head>
  <body>
    <header>
    </header>


  <section class="places">
    <h1>Places</h1>
    <article class="home">
      <div class="price_by_night">$80</div>
      <h2>Home</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> John Lennon</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="apartment">
      <div class="price_by_night">$65</div>
      <h2>Apartment</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Tina Fey</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="dorm">
      <div class="price_by_night">$20</div>
      <h2>Dorm</h2>

      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Lorie</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
  </section>
    </div>

    <footer>
      Footer
    </footer>
  </body>
</html>

Upvotes: 1

Answers (6)

Mike B

Reputation: 2776

You can just add

   body {
     padding-bottom: 60px;
   }

As Your footer is fixed element, Your body doesn't reserve any space in it. It just goes on top of everything that's in there at the very bottom. padding-bottom: 60px just makes extra 60px at the bottom of Your body where nothing can be in (as it is padding) and then your footer just lies on top of it.
Plus, Your pasted example has one closing div tag (</div) too much.

Upvotes: 0

Kisaro

Reputation: 281

By using position: fixed on the footer, you removed it from the document flow, which is why it doesnt "respect" the other elements inside said flow and is placed on top instead. However since the footers height is fixed at 60px, you can just add a bottom margin to your .places section (since that one wraps around all articles) to compensate.

.places {margin-bottom: 60px}

Upvotes: 0

DDos Schwagins

Reputation: 219

If You want to have this object over footer change only z-index to higher than default of the footer.

Upvotes: 0

j08691

Reputation: 207891

You can add a bottom margin to the last <article> that's as tall or taller than your footer with:

article:last-of-type {
    margin-bottom: 70px;
}

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

.price_by_night {
  color: #FF5A5F;
  border: 4px solid #FF5A5F;
  border-radius: 50%;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  margin: 0;
  float: right;
  line-height: 60px;
}

.information {
  height: 80px;
  border-top: #DDDDDD 1px solid;
  border-bottom: #DDDDDD 1px solid;
}

.max_guest {
  background-image: url("images/icon_group.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_rooms {
  background-image: url("images/icon_bed.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_bathrooms {
  background-image: url("images/icon_bath.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  height: auto;
  display: inline-block;
  margin: 7px;
  line-height: 100px;
  text-align: center;
}

.user {
  margin-bottom: 10px;
}

.description {
  text-align: left;
  float: left;
}


/*footer*/

footer {
  position: fixed;
  height: 60px;
  width: 100%;
  line-height: 60px;
  border-top: solid 1px #CCCCCC;
  bottom: 0px;
  background-color: white;
  text-align: center;
}

article:last-of-type {
margin-bottom: 70px;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="8-places.css" media="all">
  <link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>

<body>
  <header>
  </header>


  <section class="places">
    <h1>Places</h1>
    <article class="home">
      <div class="price_by_night">$80</div>
      <h2>Home</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> John Lennon</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="apartment">
      <div class="price_by_night">$65</div>
      <h2>Apartment</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Tina Fey</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="dorm">
      <div class="price_by_night">$20</div>
      <h2>Dorm</h2>

      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Lorie</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
  </section>
  </div>

  <footer>
    Footer
  </footer>
</body>

</html>

Upvotes: 1