Four div column layout with one div fixed(sticky)

Question

I'm trying to creating a layout with four columns with div 4 being sticky on the desktop and in tablets and will be hidden in mobile. I tried several ways from the position, overflows and all, but still, couldn't figure out. Any solution, please? This is the layout

Here's my code:

  .div1 {
  float: left;
  width: 45%;
}

.div2 {
  display: inline-block;
  width: 30%;
}

.div3 {
  display: inline-block;
  width: 20%;
}

.div4 {
  float: right;
  width: 10%;
}


/*For tablets*/

@media (max-width:767px) {
  .div1 {
    width: 45%;
  }
  .div2 {
    width: 45%;
  }
  .div3 {
    width: 100%;
  }
  .div4 {
    width: 10%;
  }
  /*For mobile*/
  @media (max-width:320px) {
    .div1 {
      width: 100%;
    }
    .div2 {
      width: 100%;
    }
    .div3 {
      width: 100%;
    }
    .div4 {
      display: none;
    }
  }

<div class="homesection">
  <div class="div1">Column 1</div>
  <div class="div2">Column 2</div>
  <div class="div3">Column 3</div>
  <div class="div4">Column 4</div>
</div>

Answer 1

You can achieve your requirement with these code change.

<div class="homesection">
 <div class="div1">Column 1</div>
 <div class="div2">Column 2</div>
 <div class="div4">Column 4</div>
 <div class="div3">Column 3</div>
</div>
<style>
 .div1{ float: left; width: 40%; }
 .div2{ float: left; width: 30%; }
 .div3{ float: right; width: 20%; }
 .div4{ float: right; width: 10%; }
 /*For tablets*/
 @media screen and (max-width:767px){
  .div1{ width:45%; }
  .div2{ width:45%; } 
  .div3{ width:100%;}
  .div4{ width:10%; }
 }
 /*For mobile*/
 @media screen and (max-width:320px){
  .div1{ width:100%; }
  .div2{ width:100%; }
  .div3{ width:100%; }
  .div4{ display:none; }
 }
</style>

Things which i have changed.

1. switched div4 and div3 in html
2. for div2 i have given float: left and for div3 float:right instead of inline-block

Answer 2

See if any of this helps..

(i didnt use any js for a sticky, just position: fixed)

body { 
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.container, .first3, .div1, .div2, .div3, .div4 { 
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}
.div1, .div2, .div3, .div4 { 
  overflow: hidden;
}
.container {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1;
  height: 100%;
}
.first3 {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100%;
  font-size: 40px;
}
.div1 {
  width: 43.33%;
  background-color: hsla(0, 0%, 10%, 1);
}
.div2 {
  width: 33.33%;
  background-color: hsla(0, 0%, 20%, 1);
}
.div3 {
  width: 23.33%;
  background-color: hsla(0, 0%, 30%, 1);
}
.div4 {
  position: fixed;
  top: 0; right: 0;
  display: flex;
  width: 10%;
  background-color: hsla(0, 0%, 40%, 1);
}

@media (max-width: 767px) {
  .first3 { width: 100%; font-size: 16px; }
  .div1 { width: 45%; height: 50%; }
  .div2 { width: 45%; height: 50%; } 
  .div3 { width: 100%; height: 50%; }
  .div4 { 
    position: fixed;
    top: 0; right: 0;
    height: 50%; 
  }
}

@media (max-width: 320px) {
  .first3 { width: 100%; }
  .div1 { width: 100%; height: auto; }
  .div2 { width: 100%; height: auto; } 
  .div3 { width: 100%; height: auto; }
  .div4 { display: none; }
}

<div class="container">
  <div class="first3">
    <div class="div1">
Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler
    </div>
    <div class="div2">
Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler
    </div>
    <div class="div3">
Content filler div 3 content filler div 3 Content filler div 3 content filler div 3 Content filler div 3 content filler div 3
    </div>
  </div>
  <div class="div4">
Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler
  </div>
</div>

fiddle

https://jsfiddle.net/Hastig/ogvn03oc/2/

Answer 3

You can use flex box, below link may be useful for you
https://css-tricks.com/snippets/css/a-guide-to-flexbox/