I can't get position sticky to work on a header

Question

I have applied position: sticky to an articles header element but it isn't working.

header {
 width: 25%;
 float: left;
 top: 0;
 position: sticky; 
 }

The codepen is here http://codepen.io/cssgrid/pen/7a86f94c7d581f913c43a0c7b512ddb0?editors=1100

Answer 1

It's because the floated elements in .thousand aren't cleared, .thousand's height is 0 (aside from it's margin). So header has nothing to be sticky to.

I made the content of .thousand inline-block so that you don't have to clear the floats, and that seems to work.

* {
  box-sizing: border-box;
}

.hero_img {
  height: 50vh;
  width:  100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.thousand {
  max-width: 1000px;
  margin: 0 auto;
  clear: both;
  margin-top: 2.5em;
  padding-top: 2.5em;
}

header {
  width: 25%;
  display: inline-block;
  top: 0;
  position: sticky; 
  vertical-align: top;
}

p {
  width: 75%;
  display: inline-block;
}

<div class="hero_img"></div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
    aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
    ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

Alternatively, you can give height to .thousand by removing the float from the p element inside of it (the taller element) and just floating header (the shorter element)

* {
  box-sizing: border-box;
}

.hero_img {
  height: 50vh;
  width:  100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.thousand {
  max-width: 1000px;
  margin: 0 auto;
  clear: both;
  margin-top: 2.5em;
  padding-top: 2.5em;
}

header {
  width: 25%;
  float: left;
  top: 0;
  position: sticky; 
}

p {
  width: 75%;
  display: inline-block;
}

<div class="hero_img"></div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
    aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
    ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>