Layout messes up once content gets below screen height

Question

I've been working on cloning a New York Times article and practicing the positioning of elements. Everything seemed to be stacking up right until you would have to start scrolling down. As soon as I add content that would go below my browsers screen everything ends up out of place and pushed up it seems. I'm learning, feel free to call me out on some of my bad practices. The html I'm adding is what works, anything added after this causes problems.

HTML:

<!Doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta charset="utf-8">
    <title>Space Ripples Reveal Big Bang's Smoking Gun - The New York Times</title>
</head>
<body>
    <div class="sectionbox"> <img src="section.png" height="20" width="20"><div class="sectiontext">SECTIONS</div>
</div>
<div class="container">
    <div class="header">

        <div class="headerfields">
            <span>HOME</span>
        </div>

        <div class="headerfields2">
            <div>SEARCH</div>
        </div>

        <div class="title"><img src="logo.png"></div>

        <div class="headerbuttons"><button>SUBSCRIBE NOW</button><button>LOGIN</button>
        </div>

    </div>

    <div class="section2">
        <div class="row">
            <img class="topimages" src="1.jpg">
            <p class="toptext">Finalists in NASA’s Spacecraft Sweepstakes: A Drone on Titan, and a Comet-Chaser</p>
        </div>

        <div class="row">
            <img class="topimages" src="2.jpg">
            <p class="toptext"> Bruce McCandless, First to Fly Untethered in Space, Dies at 80</p>
        </div>

        <div class="row">
            <p class="toptext">Is Miley Cyrus Right? Do We Even Exist? We Try to Find Out.</p>
        </div>

        <div class="row">
            <img class="topimages" src="3.jpg">
            <p class="toptext">Glowing Auras and ‘Black Money’: The Pentagon’s Mysterious U.F.O. Program</p>
        </div>

        <div class="row">
            <img class="topimages" src="4.jpg">
            <p class="toptext">The Great Red Spot Descends Deep Into Jupiter</p>
        </div>
    </div>

    <div class="section3">
        <img src="ad.jpg">
    </div>

    <div class="section4">
        <p class="section4text">Space & Cosmos</p>
        <p class="section4text2">Space Ripples Reveal Big Bang’s Smoking Gun</p>
    </div>

</div>

</body>
</html>

CSS:

body{
    text-align: center;
    margin:0;
    padding:0;
    min-height: :100%;
}

.container{
    min-height:100%;
    position:relative;
    margin-left: 30px;
    border:1px solid black;
}

.header{
    height:50px;
    border:1px solid black;
    position:fixed;
    width:100%;
    background: white;
}

.sectionbox{
    position:fixed;
    float:left;
    width:90px;
    height:14px;
    z-index:1;
    margin-left: 15px;
    margin-top: 10px;
    padding:7px 9px;
    border:1px solid black;
    box-shadow: 0 3px 2px 0 rgba(0,0,0,0.06),
    inset -1px -1px 1px 0 rgba(0,0,0,0.02);
    border-bottom-color: #cecece;
    font-weight: 700;
    font-size: 0.6875rem;
    background: white;
}

img[src="section.png"]{
    float:left;
}

.sectiontext{
    margin-top: 3px;
}

.headerfields{
    float:left;
    margin-left: 120px;
    margin-top: 20px;
    font-family: "nyt-franklin",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 10px;
}

.headerfields2{
    float:left;
    margin-left: 30px;
    margin-top: 20px;
    font-family: "nyt-franklin",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 10px;
}

.title{
    padding-right:350px;
    padding-top: 15px;
}

.headerbuttons{
    position: absolute;
    top:10px;
    right: 50px;
    display: inline;

}

button{
    -moz-box-sizing: border-box;
    background-color: #6288A5;
    border: 1px solid #4D7B9F;
    border-radius: 3px;
    color: #fff !important;
    display: inline-block;
    font-size: 10px;
    font-family: nyt-franklin, sans-serif;
    font-style: normal;
    font-weight: 700;
    padding: 7px 10px 6px;
    text-transform: none;
    text-decoration: none;
    margin-right: 10px;
}

.section2{
    height:100px;
    margin-top: 50px;
    border:1px solid black;
}

.row{
    border-right: 1px solid black;
    margin:10px;
    float:left;
    height:80px;
    width:232px;
    background: white;
}

.topimages{
    float:left;
}

.toptext{
    font-size:12px;
}

.section3{
    margin:0 auto;
    width:85%;
    height: 250px;
    padding:30px;
    border-bottom: 1px solid black;
}

.section4{
    height: 125px;
    border-bottom: 1px solid black
    width:85%;
}

.section4text{
    position:absolute;
    left:65px;
    font-weight: 700;
    font-style: normal;
    font-family: "nyt-franklin",arial,helvetica,sans-serif;
}

.section4text2{
    font-family: "nyt-cheltenham",georgia,"times new roman",times,serif;
    font-style: italic;
    font-weight: 700;
    position: absolute;
    left: 65px;
    bottom: 0;
    font-size: 34px;
}

.section5{
    background: red;
    height:600px;
    width:85%;
}

that is probably because you used `position: absolute` – JoshKisb Dec 23 '17 at 23:02 — JoshKisb, Dec 23 '17 at 23:02

score 0 · Accepted Answer · answered Dec 23 '17 at 23:13

I think @JoshKisb's comment is on the right track. You're using position: absolute but in some cases the element's frame of reference is the .container, which is causing problems. Namely, the .section4text2 element, which is position: absolute but it's nearest non static element is the .container. This means it's using the bottom of the container for it's bottom position.

For a more detailed explanation of CSS positioning see this solution I posted.

I've made a few edits to cleanup the overlapping elements as well:

body {
  text-align: center;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

.container {
  min-height: 100%;
  position: relative;
  margin-left: 30px;
  border: 1px solid black;
}

.header {
  height: 50px;
  border: 1px solid black;
  position: fixed;
  width: 100%;
  background: white;
}

.sectionbox {
  position: fixed;
  float: left;
  width: 90px;
  height: 14px;
  z-index: 1;
  margin-left: 15px;
  margin-top: 10px;
  padding: 7px 9px;
  border: 1px solid black;
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.06), inset -1px -1px 1px 0 rgba(0, 0, 0, 0.02);
  border-bottom-color: #cecece;
  font-weight: 700;
  font-size: 0.6875rem;
  background: white;
}

img[src="section.png"] {
  float: left;
}

.sectiontext {
  margin-top: 3px;
}

.headerfields {
  float: left;
  margin-left: 120px;
  margin-top: 20px;
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 10px;
}

.headerfields2 {
  float: left;
  margin-left: 30px;
  margin-top: 20px;
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 10px;
}

.title {
  padding-right: 350px;
  padding-top: 15px;
}

.headerbuttons {
  position: absolute;
  top: 10px;
  right: 50px;
  display: inline;
}

button {
  -moz-box-sizing: border-box;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff !important;
  display: inline-block;
  font-size: 10px;
  font-family: nyt-franklin, sans-serif;
  font-style: normal;
  font-weight: 700;
  padding: 7px 10px 6px;
  text-transform: none;
  text-decoration: none;
  margin-right: 10px;
}

.section2 {
  height: 100px;
  margin-top: 50px;
  border: 1px solid black;
}

.row {
  border-right: 1px solid black;
  margin: 10px;
  float: left;
  height: 80px;
  width: 232px;
  background: white;
}

.topimages {
  float: left;
}

.toptext {
  font-size: 12px;
}

.section3 {
  margin: 0 auto;
  width: 85%;
  height: 250px;
  padding: 30px;
  border-bottom: 1px solid black;
}

.section4 {
  height: 145px;
  position: relative;
  border-bottom: 1px solid black width:85%;
}

.section4text {
  position: absolute;
  left: 65px;
  font-weight: 700;
  font-style: normal;
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
}

.section4text2 {
  font-family: "nyt-cheltenham", georgia, "times new roman", times, serif;
  font-style: italic;
  font-weight: 700;
  position: absolute;
  left: 65px;
  bottom: 0;
  font-size: 34px;
}

.section5 {
  background: red;
  height: 600px;
  width: 85%;
}

<div class="sectionbox"> <img src="section.png" height="20" width="20">
  <div class="sectiontext">SECTIONS</div>
</div>
<div class="container">
  <div class="header">

    <div class="headerfields">
      <span>HOME</span>
    </div>

    <div class="headerfields2">
      <div>SEARCH</div>
    </div>

    <div class="title"><img src="logo.png"></div>

    <div class="headerbuttons"><button>SUBSCRIBE NOW</button><button>LOGIN</button>
    </div>

  </div>

  <div class="section2">
    <div class="row">
      <img class="topimages" src="1.jpg">
      <p class="toptext">Finalists in NASA’s Spacecraft Sweepstakes: A Drone on Titan, and a Comet-Chaser</p>
    </div>

    <div class="row">
      <img class="topimages" src="2.jpg">
      <p class="toptext"> Bruce McCandless, First to Fly Untethered in Space, Dies at 80</p>
    </div>

    <div class="row">
      <p class="toptext">Is Miley Cyrus Right? Do We Even Exist? We Try to Find Out.</p>
    </div>

    <div class="row">
      <img class="topimages" src="3.jpg">
      <p class="toptext">Glowing Auras and ‘Black Money’: The Pentagon’s Mysterious U.F.O. Program</p>
    </div>

    <div class="row">
      <img class="topimages" src="4.jpg">
      <p class="toptext">The Great Red Spot Descends Deep Into Jupiter</p>
    </div>
  </div>

  <div class="section3">
    <img src="ad.jpg">
  </div>

  <div class="section4">
    <p class="section4text">Space & Cosmos</p>
    <p class="section4text2">Space Ripples Reveal Big Bang’s Smoking Gun</p>
  </div>

</div>

It all makes sense now. Although I didn't check your code yet your explanation was enough. Removed the position:absolute; bottom:0; and used padding to move them to the bottom. Thanks — Jacob Moore, Dec 24 '17 at 00:10

Layout messes up once content gets below screen height

1 Answers1