Make a floated element a sticky

HTML & CSS
1

I have two columns, im trying to make the one on the left a sticky whn it reaches he top of the page, but I get
http://lukesspot.com/indus_links/
Can I not make a floated element a sticky?

2

urt, urt!,

Please validate the code that you posted and lettuce try again.:dolphin:

3

ok am using

why is it not working
http://lukesspot.com/indus_links/
shouldn’t the gray box be the sticky?

4

Your using flex so the sidebar is matching its height to the main content which has height 150vh.

Look back at the “How to…” link you posted. You will see a fixed height on the sticky element that is shorter than the scrolling content’s height.

#aside {
    width: 15%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: gray;
    height:50vh; /*added this for testing*/
}
5

To use flex and keep from setting a fixed height on your menu you can nest a new element in your aside.

That new element will no longer be a flex item and the menu content can determine it’s height. I used a <ul> in the following example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>San Diego: Configuration Management</title>
<style>

.wrapper {
  display: flex;
  justify-content: space-between;
}
.main {
  width: 85%;
  height: 150vh;
  background:#eee;
}
.aside {
  width: 15%;
  background:#ccc;
}
.menu {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background:red;
}

</style>
</head>
<body>

<div class="wrapper">
  <div class="aside">
    <ul class="menu">
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="main">
  </div>
</div>

</body>
</html>
2 Likes
6

align-self:flex-start on the side column would also work as long as you didn’t want full length backgrounds on the side column.

We had the same question a few days ago :slight_smile:

3 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.