CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jenlky
jenlky

Reputation: 396

Container's height doesn't occupy the whole webpage

I want the container's height (with white background) to occupy the whole webpage, it was doing that.

I've forked my webpage and tried to replicate the bug, by commenting out and testing the code part by part. I'm fairly certain that when I used dl dd dt tags, it kinda broke the website. However, sometimes those tags break the design sometimes they doesn't. Can anyone take a look at the code, and explain to me what's going on and how to resolve it? Thanks.

HTML

  <div class="pad-left pad-top">
    <h2 class="title">Timeline</h2>
    <dl>
      <dt>June 28, 1971</dt>
      <dd>Elon Reeve Musk was born in Pretoria, Transvaal, South Africa, the son of Maye Musk and Errol Musk.</dd>
      .....
    </dl>

    <p class="text-center">To find out more about Elon Musk, visit <a href="https://blog.adioma.com/how-elon-musk-started-infographic/">How Elon Musk Started – Infographic</a></p>
  </div>

CSS

.pad-top { /* padding in header and on top of Timeline */
  padding-top: 60px;
}

.pad-left { 
  padding-left: 30px;
}

dl {
  width: 100%;
  overflow: hidden;
  padding-left: 55px;
}

dt {
  float: left;
  width: 15%;
  /* adjust the width; make sure the total of both is 100% */
}

dd {
  float: left;
  width: 85%;
  padding-right:15px;
  /* adjust the width; make sure the total of both is 100% */
}

https://codepen.io/jenlky/full/WZdQoB/

EDIT:

Problem solved. I changed the margin of footer from the default 16px to 0px, and ta-da it worked. I suppose the margin of the website's last element (be it footer or whatsoever) will affect it, so I have to take note.

Upvotes: 1

Views: 62

Answers (1)

ZombieChowder
ZombieChowder

Reputation: 1204

The reason this is happening is because you have a margin on your p element in the footer. Change the margin from 16 px to 0 and it will fix it.

This is the element you need to change the margin of:

 <p>This page has been authored and coded by Jenssen Lee.</p>

Upvotes: 1

Related Questions