Sticky doesn't work with float element CSS

Question

I have a section tag and aside tag enclosed in a main-tag and use float left and right respectively, now I want to make my aside which have float:right to be sticky. Is their a way I can do sticky for the aside-tag? I can actually do it when I'm using a flexbox, but is there a way when using a float?

section {
  float: left;
}

aside {
  float: right;
  position: sticky;
  top: 0;
}

<main>
  <section>New Section</section>
  <aside>New Aside</aside>
</main>

you need to clear float or the main height will be 0 and since it's the container of the sticky element, you will have no sticky behavior — Temani Afif, Sep 29 '19 at 18:29

score -1 · Answer 1 · answered Sep 29 '19 at 18:27

Use flex layout

main{
  display: flex;
  justify-content: space-between;
  width:100%;
  height:999px/*for scrolling*/
}

section{
  width: 75%;
  border:1px solid black;
}

aside{
  flex-basis: 24%;
  margin-bottom: 1.6%;
}

.aside-inner{
  position: sticky;
  top: 0;
  border:1px solid black;
  height:3rem
}

<main>
  <section>Main content</section>
  <aside>
    <div class="aside-inner">Sidebar content</div>
  </aside>
</main>

Sticky doesn't work with float element CSS

1 Answers1