CODEWITHSUNDEEP
htmlcss
Koraxel
Koraxel

Reputation: 13

Left Div Fixed, Multiple Right Divs Scrollable

I'm attempting to have a static left div and have the right divs be scrollable. I'd like to be flexible so I set widths and heights to percentage basis.

Currently, when I scroll the left div scrolls with the right div, so when I reach the second right div in the stack, there is not left div associated to it.

I'd like for the left div to always remain and only the right divs to scroll.

HTML:

<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>

CSS:

html{
height:100%;
width:100%;
margin: 0px;
}

body{
height:100%;
width: 100%;
margin: 0px;
}

.div-left{
    background-color: darkblue;
    height: 100%;
    width:50%;
    margin: 0px;
    float: left;
    position: static;
}

.div-right-1{
    background-color: yellow;
    height: 100%;
    width: 50%;
    margin: 0px;
    float: right;
} 

.div-right-2{
    background-color: aqua;
    height: 100%;
    width: 50%;
    margin:0px;
    float: right;
}

Upvotes: 1

Views: 5281

Answers (2)

Nimish
Nimish

Reputation: 1016

You just have to set position: fixed for left div. Check code below.

html{
    height:100%;
    width:100%;
    margin: 0px;
}

body{
    height:100%;
    width: 100%;
    margin: 0px;
}

.div-left{
    background-color: darkblue;
    height: 100%;
    width:50%;
    margin: 0px;
    float: left;
    position: fixed;
}

#clear {
    clear: both;
}

.div-right-1{
    background-color: yellow;
    height: 100%;
    width: 50%;
    margin: 0px;
    float: right;
} 

.div-right-2{
    background-color: aqua;
    height: 100%;
    width: 50%;
    margin:0px;
    float: right;
}
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div id="clear"></div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>

Upvotes: 4

G-Cyrillus
G-Cyrillus

Reputation: 105863

you need the first in fixed position and the rest be margin-left at 50% ... if i understood:

html {
  height: 100%;
  width: 100%;
  margin: 0px;
}

body {
  height: 100%;
  width: 100%;
  margin: 0px;
}

.div-left {
  background-color: darkblue;
  height: 100%;
  width: 50%;
  margin: 0px;
  position: fixed;
}

[class^="div-right"] {
  background-color: yellow;
  height: 100%;
  margin-left: 50%;
}

.div-right-2 {
  background-color: aqua;
}
<div class="div-left div-left-small">
</div>
<div class="div-right-1 div-right-1-small">
</div>
<div class="div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>

Upvotes: 1

Related Questions