Horizontal scrolling content with non-scrolling sidebar - html

Question

I'm trying to create a horizontal scrolling area with a sidebar, that is not scrollable. I want to create it without using position: fixed; but I can't make it work. What am I missing?
HTML
<div class="sidebar">
<h1 class="logo">Title</h1>
</div>
<div class="scroll-area">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi harum, magnam, ducimus corporis ipsam blanditiis possimus
voluptate obcaecati laboriosam dicta quidem perspiciatis ipsa
tenetur. Asperiores veritatis dicta doloremque. Ea, ad.
</p>
<div class="image-gallery">
<ul>
<li><img src="http://placehold.it/500x800"></li>
<li><img src="http://placehold.it/500x800"></li>
<li><img src="http://placehold.it/500x800"></li>
</ul>
</div>
</div>
CSS
.scroll-area {
width: 3000px;
overflow: scroll;
}
ul li {
display: inline;
}
EDIT
I've created a fiddle to visualize my issue. As it is now, the sidebar is scrolling together with the content.

Answer 1

Here is an example that achieves what I believe you're trying to do. Replace code as needed.
HTML:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch Report</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel"> Annuities Report</h4>
</div>
<pre class="report-pre modal-body report-modal-body">
INDIVIDUAL ANNUITIES
BY AGENCY WITH AGENT DETAIL
COMMISSIONABLE DEPOSITS
MONTH TO DATE
AGENCY NUMBER
AGENCY NAME FLEXIBLE ANNUITY SPIA SPDA VARIABLE ANNUITY TOTAL
AGENT #
AGENT NAME COUNT 1ST YEAR EXTERNAL INTERNAL SUBSEQUENT TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL SUBSEQUENT TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL SUBSEQUENT TOTAL
----------------------------------------------------------------- ------------------------------------------------------ ------------------------------------------------------ ----------------------------------------------------------------- ----------------------------------------------------------------
EN00000006
POE - James
AG00000001
POE, Henry 1.00 2,512 25,812 0 450 28,775 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 1,741 1,741 1.00 2,512 25,812 0 2,191 30,516
AG00050001
Eve, .00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 52 0 0 3,081 3,133 .00 52 0 0 3,081 3,133
AG000400
Bob, .00 30 0 0 100 130 .00 0 0 0 0 .00 0 0 0 0 .00 166 0 0 370 536 .00 196 0 0 470 666
1.00 2,542 25,812 0 550 28,905 .00 0 0 0 0 .00 0 0 0 0 .00 218 0 0 5,192 5,410 1.00 2,760 25,812 0 5,742 34,315
EN00000010
LOST AGENT
AG00005
Jim, RI .00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 100 100 .00 0 0 0 100 100
.00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 100 100 .00 0 0 0 100 100
</pre>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-dialog -->
</div>
CSS:
.report-modal-body {
max-height:calc(100vh - 150px);
overflow-y:auto;
overflow-x:auto;
}
.report-pre {
width:100%;
overflow-x:auto;
word-wrap:normal;
margin:1px;
}
Fiddle

Answer 2

Try This
white-space:nowrap;
Full code:
.scroll-area {
width: 85%;
float: left;
overflow: scroll;
white-space: nowrap;
}
.sidebar {
width: 15%;
float: left;
}
I hope this will help you.
Here is Fiddle