Content Here / Inhalt Hier
Content Here / Inhalt Hier
.K {Boxes Next To Each Other}
.KhAk {MainBox 3}
div.KhAkScrBox3 {
height:120px; width:450px;
padding:10px;
border:2px solid green;
}
.KhAk {LeftScrollBox 1}
div.KhAkScrBox1 {
height:100px; width:200px;
float:left; padding:10px;
overflow:auto;
border:2px solid red;
}
.KhAk {RightScrollBox 2}
div.KhAkScrBox2 {
height:100px; width:200px;
float:right; padding:10px;
overflow:auto;
border:2px solid yellow;
}
<div class="KhAkScrBox3">
<div class="KhAkScrBox1">
Content 1 Here / Inhalt 1 Hier
</div>
<div class="KhAkScrBox2">
Content 2 Here / Inhalt 2 Hier
</div>
</div>
☼- Adjust the height and width of all Containers (Boxes) to suit your own needs.
But, set the width of Box 3 to the:
width of Box1 + width of Box2 + 50px or more.
And, set the height of Box 3 to the:
height of Box1 OR Box2 + 20px.
☼- overflow:auto; makes containers to the "Scrollable Content Boxes".
☼- If you do not wish to define a border surrounding the boxes,
delete this line of the codes:
border:2px solid COLOR;
☼- If you want to add "the same" scroll boxes with the same properties at the multiple
places on your profile:
Just add the second part of the code into the section you wish.
☼- If you want to add "different" scroll boxes with other properties at the multiple
places on your profile:
Add the entire code BUT change:
the class numbers 1, 2 and 3 to 4, 5 and 6
☼- To flip the "Scrollbar" to the left side of your "Box",
add the below line to the CSS code before "}" :
direction: rtl;