CSS sticky inner container within a parent div

Question

CSS sticky inner container within a parent div

I am currently facing an issue with my HTML layout where I have a left menu and content in the right section. I want to make the submenu-2 within the left container stick to the top after scrolling down. I tried using position:sticky and top:0px but it doesn't seem to be working.

Why isn't this solution working and how can I fix it?

#big {}

#left {
  width: 20%;
  float: left;
  background: #f5f5f5;
}

#left .submenu-1 {
  border: 1px solid #8b8b8b;
}

#left .submenu-2 {
  border: 1px solid #8b8b8b;
  top: 0px;
  position: sticky;
}

#content {
  width: 70%;
  float: left;
}

<div id="big">
  <div id="left">
    <div class="submenu-1">
      submenu 1<br/>
      <br/><br/><br/>
    </div>
    <div class="submenu-2">
      submenu 2<br/>
    </div>
  </div>
  <div id="content">
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> Where does it come from?
    <br/><br/> Where does it come from?
  </div>
</div>

html css

Answer 1

Answer №1

When it comes to designing layouts with sticky elements, it's important to note that using floats can lead to compatibility issues. Instead, consider using flex for a more reliable result. And if you're curious about performance comparisons between flex and grid, check out this benchmark test:

#big {
  display: flex;
}

#left {
  width: 20%;
  top: 0px;
  background: #f5f5f5;
}

#left .submenu-1 {
  border: 1px solid #8b8b8b;
}

.submenu-2 {
  border: 1px solid #8b8b8b;
  top: 0px;
  position: sticky;
}

#content {
  width: 70%;
}

<div id="big">
  <div id="left">
    <div class="submenu-1">
      submenu 1<br/>
      <br/><br/><br/>
    </div>
    <div class="submenu-2">
      submenu 2<br/>
    </div>
  </div>
  <div id="content">
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> Where does it come from?
    <br/><br/> Where does it come from?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
</div>

Answer 2

When it comes to designing layouts with sticky elements, it's important to note that using floats can lead to compatibility issues. Instead, consider using flex for a more reliable result. And if you're curious about performance comparisons between flex and grid, check out this benchmark test:

#big {
  display: flex;
}

#left {
  width: 20%;
  top: 0px;
  background: #f5f5f5;
}

#left .submenu-1 {
  border: 1px solid #8b8b8b;
}

.submenu-2 {
  border: 1px solid #8b8b8b;
  top: 0px;
  position: sticky;
}

#content {
  width: 70%;
}

<div id="big">
  <div id="left">
    <div class="submenu-1">
      submenu 1<br/>
      <br/><br/><br/>
    </div>
    <div class="submenu-2">
      submenu 2<br/>
    </div>
  </div>
  <div id="content">
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> Where does it come from?
    <br/><br/> Where does it come from?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
</div>

Answer 3

Answer №2

I highly recommend utilizing CSS grids instead of relying on floats. Grids offer a more structured approach and are superior to flexbox for top-level layouts as they require less browser calculation, resulting in slightly better rendering performance. By following this method, your layout will function as intended without appearing outdated like it's stuck in the early 2000s ;).

#big { 
  /* include the following */
  display: grid;
  gap: 5%;
  grid-template-columns: 20% 70%;
}

#left {
  /* delete float and width properties */
  background: #f5f5f5;
}

#left .submenu-1 {
  border: 1px solid #8b8b8b;
}

#left .submenu-2 {
  border: 1px solid #8b8b8b;
  top: 0px;
  position: sticky;
}

#content {
  /* remove float and width settings */
}

<div id="big">
  <div id="left">
    <div class="submenu-1">
      submenu 1<br/>
      <br/><br/><br/>
    </div>
    <div class="submenu-2">
      submenu 2<br/>
    </div>
  </div>
  <div id="content">
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> Where does it come from?
    <br/><br/> Where does it come from?
  </div>
</div>

Answer 4

I highly recommend utilizing CSS grids instead of relying on floats. Grids offer a more structured approach and are superior to flexbox for top-level layouts as they require less browser calculation, resulting in slightly better rendering performance. By following this method, your layout will function as intended without appearing outdated like it's stuck in the early 2000s ;).

#big { 
  /* include the following */
  display: grid;
  gap: 5%;
  grid-template-columns: 20% 70%;
}

#left {
  /* delete float and width properties */
  background: #f5f5f5;
}

#left .submenu-1 {
  border: 1px solid #8b8b8b;
}

#left .submenu-2 {
  border: 1px solid #8b8b8b;
  top: 0px;
  position: sticky;
}

#content {
  /* remove float and width settings */
}

<div id="big">
  <div id="left">
    <div class="submenu-1">
      submenu 1<br/>
      <br/><br/><br/>
    </div>
    <div class="submenu-2">
      submenu 2<br/>
    </div>
  </div>
  <div id="content">
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> Where does it come from?
    <br/><br/> Where does it come from?
  </div>
</div>

Answer 5

Answer №3

One suggestion is to use the main div #big as a flex box.

#big {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

#left {
    width: 20%;
    float: left;
    background: #f5f5f5;
    position: sticky;
    top: 0;
}

<div id="big">
  <div id="left">
    <div class="submenu-1">
      submenu 1<br/>
      <br/><br/><br/>
    </div>
    <div class="submenu-2">
      submenu 2<br/>
    </div>
  </div>
  <div id="content">
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> Where does it come from?
    <br/><br/> Where does it come from?
  </div>
</div>

Answer 6

One suggestion is to use the main div #big as a flex box.

#big {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

#left {
    width: 20%;
    float: left;
    background: #f5f5f5;
    position: sticky;
    top: 0;
}

<div id="big">
  <div id="left">
    <div class="submenu-1">
      submenu 1<br/>
      <br/><br/><br/>
    </div>
    <div class="submenu-2">
      submenu 2<br/>
    </div>
  </div>
  <div id="content">
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?
    <br/><br/> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    <br/><br/> Where does it come from?
    <br/><br/> Where does it come from?
  </div>
</div>

CSS sticky inner container within a parent div

Answer №1

Answer №2

Answer №3

Similar questions

Tips for utilizing the div tag in a similar manner as a table

What is the method for automatically scrolling a WebView HTML document?

CSS fails to function properly on websites hosted on nginx servers

Adjust the position of the background when hovering with the mouse to create a right

Text encoded in UTF-8 emerges from the surrounding frame

Tips for designing a tilted CSS layout from scratch

Testing with Selenium to confirm the presence of a specific CSS attribute within the style attribute

What is the best way to alter the text color based on certain conditions within a table column using PHP

Utilizing Java to Store HTML Content in MySQL

Is there a way to retrieve the content of a WordPress page minus the HTML tags?

Ensuring DIV Fills without Compromising Aspect Ratio

Utilize the div element to segment a webpage into four different sections

The random sorting algorithm in the query_posts function is disrupting the formatting of the CSS

Secure access to an API using a certificate within a Vue.js application running on localhost

Could someone explain why Bootstrap columns are positioned in the same row but stacked on top of each other?

Is using CSS as an HTML attribute considered poor practice?

Develop a custom dropdown menu using JavaScript

Creating a form with required fields in Angular and using the ngIf directive

The CSS styling does not seem to be affecting the text button's appearance

Difficulty arises when trying to engage with the addition span within a span using jQuery