Arranging 2 Div's Parallel

Question

Problem :

• https://ibb.co/dkof1U
• https://ibb.co/d5Vw89 (FIXED)
• the second div always ends up inside the first div.

Code :

<div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9;"> .... </div> <div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9;"> .... </div>

Tried Case :

• Tried floating the first div and the second div but, the second div always ends up inside the first div.

Todo :

• Want to arrange div's together side by side.

UPDATED FIDDLE : https://jsfiddle.net/genackwp/

• to view what I see, view the (FIXED) image instead.

THANKS

Answer 1

Similar Helpful Stack Overflow Question
Just give your first div a class specifier to identify, and give it a float:left or just provide it in the inline style of that div.
Providing float:left to only first-div

div:first-child {
  float: left;
}

<div style=" overflow-y:scroll;width: calc(50% - 10px); height: 100vh; background-color: #ACDBC9;"> .... </div>
<div style="overflow-y:scroll; width: calc(50% - 10px);padding-left:10px; height: 100vh; background-color: #ACDBC9;"> .... </div>

Inline-style : float: left

<div style="float: left; overflow-y:scroll;width: calc(50% - 10px); height: 100vh; background-color: #ACDBC9;"> .... </div>
<div style="overflow-y:scroll; width: calc(50% - 10px);padding-left:10px; height: 100vh; background-color: #ACDBC9;"> .... </div>

Answer 2

<div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9; float:left; position:fixed;"> .... </div>
<div style="overflow-y:scroll; width: 50%; height: 100vh; background-color: #ACDBC9; float:left; position:fixed;"> .... </div>

https://jsfiddle.net/Sampath_Madhuranga/xpvt214o/605285/

Add position:fixed; to your code.

try this..It works fine now.

Answer 3

<div style="overflow-y:scroll;position:fixed; width: 50%; height: 100vh; background-color: #ACDBC9;"><div>

try add "position:fixed;", see can work or not