How to make a floating div stick to the top-CodePudding

I have 3 "boxes"/divs side by side with this class:

.roundedBox {
  float: left;
  background-color: aliceblue;
  border-radius: 15px;
  padding: 20px;
  margin: 20px;
}

Because the midle one is much taller then the other 2, I would like the other 2 to come down while we scroll down, so I tought to add this code/css class to the ones on the sides:

.stickTop {
  position: sticky;
  top: 0;
}

Doesn't seem to make any diference, what am I missing?

You can see it here:

CodePudding user response：

Hey you can check this approach below

.grid-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: min-content 1fr min-content;
  position: relative;
}

.item-sticky {
  background: firebrick;
  padding: 1rem;
  height: 150px;
  position: sticky;
  top: 10px;
}

.item-long {
  background: orchid;
  padding: 1rem;
  height: 200vh;
}

<div >
  <div >
    Some content
  </div>
  <div >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, dolores.</div>
  <div >Somecontent</div>
</div>

CodePudding user response：

You have to do some tricks in there PLUS fix the structure of your HTML - because using "float" might become a problem with responsiveness.

1st, create <div> as the outer container, this will represent as the main "row" of your 3 column boxes (roundedBox, results, roundedBox). Class name it as "container". In your CSS, this one should have display: flex; flex-direction: row;

2nd, create another 3 <div> inside the as the column boxes. Class name each as "box-item". Add another class name on the first and third "roundedBox". In your CSS, "box-item" should have width: 60%; position: relative; and "roundedBox" should have width: 20%;

3rd, Inside of each , there will be another <div >. Because the tricks of floating boxes will start here. Add class names on the first and third "inner-box-item" with "box-float" and "box-left"/"box-right". In your CSS, "box-float" should have position: fixed;. This should float the left and right boxes upon scrolling the page. In your CSS again, add ".box-float" together with ".roundedBox" to have 20% width of the box.

Take note that every time you use position: fixed; in CSS, you have to always declare the item's width.

If you're asking why "inner-box-item" is necessary, you can experiment by removing it and just position: fixed; the ".box-item" instead. See what will happen there only if you have time.

See the HTML structure and CSS below, this should be easier for you to adjust the boxes in smaller devices too.

Structure:

body {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: row;
}
.box-item {
  width: 60%;
  padding: 20px;
  position: relative;
}
.roundedBox, .box-float {
  width: 20%;
}
.inner-box-item {
  background: pink;
  height: 1000px;
}
.box-float {
  position: fixed;
  max-height: 50vh;
}
.box-left {
  left: 20px
}
.box-right {
  right: 20px
}
p {
  margin: 0;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <div >
    <div >
      <div >
        <p>A</p>
      </div>
    </div>
    <div >
      <div >
        <p>B</p>
      </div>
    </div>
    <div >
      <div >
        <p>C</p>
      </div>
    </div>
  </div>

</body>
</html>

CodePudding user response：

can you use fixed instead of sticky? I think it's