Two div together in parallel

Question

I am facing problem in maintaining two div parallel

First div should contain large data but scrolls with browser and 2 div should contain small data with stay fixed right hand side.

So when user scrolls page, both div should should stay in parllel

Like example is here(example)[https://app.thehomelike.com/apartment/RyeR9wQH4N7p2YRJA] in above page when you just visit after description, it shows two parllel div .. one stays fixed .. other move with browser scrollbar

Edit My efforts

             <div className="book">

                    <table>
                        <tr>
                            <td>
                                <div class className="page1">
                                    <h2>Page1</h2>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                </div>
                            </td>
                            <td>
                                <div className="page2" style={style} onScroll={this.handleScroll.bind(this)}>
                                    <h2>Page2</h2>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                    scroll from main scrollbar<br/>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                //css

                .book table td {
                 vertical-align: top;
                }

              .page1 {
             border: solid 1px red;
             width: 400px;
           }

         .page2 {
         border: solid 1px red;
         width: 400px;
         position: static;
         }

I don't see any divs in parallel, just a pinterest waterfall image gallery — mrid, Nov 12 '16 at 07:23
@mrid description section and available section are parallel in given link.. go and look again — manpreet singh, Nov 12 '16 at 07:25
Trying to achieve the effect you want using a table is almost impossible. In the link that you supplied they used 2 divs, set to the browser height, float left, set widths and the first dive with an overflow_y set to scroll. — , Nov 12 '16 at 07:26
If you just want a fixed position it's `position:fixed;` in CSS. — StackSlave, Nov 12 '16 at 07:29
@jeff it is not possible by using some kind of fixed position?? — manpreet singh, Nov 12 '16 at 07:31
I was just looking at your code. If you want block level Elements to be side by side use `float:left;`. — StackSlave, Nov 12 '16 at 07:34
@PHPglue please go and check the link given by me.... and see how descripion and dates available section scrolling together... — manpreet singh, Nov 12 '16 at 07:36
It's actually basic CSS positioning. You should use 2 divs (not a table), with defined widths and then use position property. — Cristian Cristea, Nov 12 '16 at 07:38
Link:-http://stackoverflow.com/questions/20592058/make-two-parallel-div-colums-the-same-height — Razia sultana, Nov 12 '16 at 07:43

score 2 · Answer 1 · answered Nov 12 '16 at 07:52

2

.book {
  position: relative;
}
.page1 {
  background-color: azure;
  width: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top:0;
}

.page2 {
  background-color: tomato;
  width: 50%;
  margin: 0;
  padding: 0;
  position: fixed;
  right:0;
  top: 0;
}

https://jsfiddle.net/1ygo20xf/

answered Nov 12 '16 at 07:52

Cristian Cristea

94
6

Its amazing man... Thanks... I like it.... – manpreet singh Nov 12 '16 at 07:55
`overflow-y: scroll` to force the vertical scrollbar to appear – Cristian Cristea Nov 12 '16 at 07:56
No problem. If you want to learn more about positioning https://developer.mozilla.org/en-US/docs/Web/CSS/position – Cristian Cristea Nov 12 '16 at 07:57
problem is that i some content above also.. so can't use this one... – manpreet singh Nov 12 '16 at 07:58
Because its allways fixed left hand side.. so its not usefull – manpreet singh Nov 12 '16 at 08:01

score 1 · Accepted Answer · answered Nov 12 '16 at 07:44

$(document).ready(function(){
 $(function(){
  $(document).scroll(function(){
   if($(this).scrollTop() >= $('.largeCont').offset().top) {
    $(".fixedCont").addClass('active');
   } else {
    $(".fixedCont").removeClass("active");
   }
  });
 });
});

html, body {
    margin: 0;
}

.section1 {
  background-color: #fff;
  height: 300px;
}

section {
  display: flex;
  flex-wrap: wrap;
}
section .largeCont {
  width: 70%;
}
section .fixedCont {
  height: 100vh;
  background-color: green;
  width: 30%;
}
section .fixedCont.active {
  position: fixed;
  right: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section1">
  SOME CONTENT
</section>

<section>
  <div class="largeCont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis enim maxime dicta quaerat id a maiores modi facilis, quisquam inventore at cum voluptas veniam obcaecati et sequi, libero, molestias tempore! Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Officiis dolores vero, rem quod inventore, ipsam cupiditate rerum tempore explicabo veniam voluptatem dolorem minima dignissimos id est harum sequi odit, corporis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur consequuntur
    necessitatibus provident accusantium, explicabo velit dolorum molestiae soluta doloribus architecto ea nesciunt porro distinctio quod nulla mollitia, obcaecati impedit dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eos, porro
    neque optio id aspernatur error atque blanditiis qui odio accusantium assumenda recusandae dolores culpa laborum voluptas, facere provident nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a dignissimos similique, incidunt
    quas voluptatem fuga adipisci. Non deleniti obcaecati, doloribus tempora deserunt, facilis ipsum magnam quis veritatis ut nemo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quos adipisci debitis inventore sed, fugit, maxime vitae
    expedita consectetur a numquam nostrum repellendus vero mollitia, rem beatae vel ex aliquam!
  </div>
  <div class="fixedCont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis mollitia amet ipsam vel saepe, rerum deserunt accusantium ratione reprehenderit eaque unde cumque! Expedita amet molestiae, dolorem porro nam nisi dolorum.
  </div>
</section>

Some like this? I think this is.

Can you help me in core javascript.. because i am working in react.js so can't use Jquery — manpreet singh, Nov 12 '16 at 07:48
https://jsfiddle.net/4zh7yuyq/2/ Sry the late, was working on it. Check the fiddle and let me now if it helps you — Alberto Rubio, Nov 12 '16 at 07:58
I should add that I took almost all from here http://stackoverflow.com/questions/35166846/in-vanilla-js-how-can-i-add-or-remove-a-class-from-an-element-based-on-whether just to let you know. — Alberto Rubio, Nov 12 '16 at 08:01
But do you know any npm react library.. which can give me this kind of similiar feature in react — manpreet singh, Nov 12 '16 at 08:10
https://www.npmjs.com/package/react-scroll I found this one, but to be honest I've never used before. — Alberto Rubio, Nov 12 '16 at 08:12
Have you ever worked with react.js... if you help me in implementing this... i can pay you.. is that possible from your side — manpreet singh, Nov 12 '16 at 08:19
Sry, but I'm affraid I've never worked with react.js. How are you working with it? Have you a test server or something? I could try to help, but don't be so sure. — Alberto Rubio, Nov 12 '16 at 08:25

mrid · Answer 3 · 2016-11-12T07:31:47.520

0

section {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 0;
}
div#one {
    width: 50%;
    height: 200px;
    background: red;
    float: left;
    overflow-y: scroll;
}
div#two {
    margin-left: 50%;
    height: 200px;
    background: black;
}

<section>
    <div id="one">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div id="two"></div>
</section>

edited Nov 12 '16 at 07:31

answered Nov 12 '16 at 07:26

mrid

5,782
5
28
71

I think you should check link again ... – manpreet singh Nov 12 '16 at 07:30
Thanks updating ... but this is not required please go and check the link given by me.. – manpreet singh Nov 12 '16 at 07:34
you wanted the apartment list and map layout side by side , right ? – mrid Nov 12 '16 at 07:37
You are quite near.. but i just want one scroll bar.. that will be browser scrollbar.. no scroll bar for div – manpreet singh Nov 12 '16 at 07:44
Is that possible?? – manpreet singh Nov 12 '16 at 07:52
That's the div's scrollbar only. It just looks like the browser's scrollbar since the div's height is the same as browser's height. If you inspect the page you are talking about, you'll see they have also done the same thing ( `#map-list .gallery-container { height: 100%; overflow-y: scroll; }` ) – mrid Nov 12 '16 at 08:07
But i don't want scrollbar for div.. just want scrollbar with browser – manpreet singh Nov 12 '16 at 08:12

score 0 · Answer 4 · answered Nov 12 '16 at 07:39

Try it

.box {
    width:100px;
    display:box;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
     /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /* W3C */
    display:box;
    box-orient:horizontal;
}

.box .column1 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: yellow;
}

.box .column2 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: green;
}

 <div class="box">
      <div class="column1">
          a<br>b
      </div>
      <div class="column2">
         a
      </div>
   </div>

Two div together in parallel

4 Answers4