0

I've run into trouble while trying to hide scrollbars from certain divs. I found some solutions on the forum but they never really match my case so I'm still struggling with the problem. My problem: I'm trying to hide scrollbars in a div that is nested inside another div that has non fixed size. (they are set to 100% of the body).

Here's the HTML:

<div id="events">
    <div id="event-list"></div>
    <div id="event-details"></div>
</div>

And the CSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#events {
  width: 100%;
  height: 100%;
}

#event-list {
  float: left;
  width: 50%;
  height: 100%;
  background-color: pink;
}

#event-details {
  float: right;
  width: 50%;
  height: 100%;
  background-color: cyan;
}

Codepen available here

I would like #event-list and #event-details to have no scrollbar but still be scrollable. If you have any idea (css? js? jquery?), I'll take it! Thanks in advance, alex

acanana
  • 51
  • 7
  • @MikeK thanks for your reply, I managed to fix my issue thanks to this post. I updated the Codepen above if anyone's interested. – acanana Apr 15 '15 at 23:59

1 Answers1

0

You can do a nested div with the outer div's width set to 100% with overflow:hidden and the inner div set to a width of 105% (you can fine tune this value) and overflow set to overflow:scroll

JSFiddle here

Chase
  • 2,206
  • 1
  • 13
  • 17
  • I had found this solution but wasn't a big fan of the 105%. I managed to fix the issue, checkout the Codepen above if you're interested. Thanks for your help. – acanana Apr 16 '15 at 00:00