Html layout with only scroll part of the page
I want to create a page layout that is split into 3 parts - one fixed width column containing two fixed height rows. and another fixed width column that could potentially contain multiple items (more than viewable).
I'm looking for a way to make the page scroll only affect a column of items, so that the left side of the screen (first column) stays in view.
Here is a sample image of the layout to better illustrate the meaning:
+3
source to share
3 answers
Apply overflow:auto
for your right columns. Check out the following HTML example.
<div style="width:450px;">
<div style="float:left; width:300px">
<div style="height:120px; border:1px solid #ff00ff;">Testing Content</div>
<div style="height:200px; border:1px solid #fff000;">Sample INformation</div>
</div>
<div style="float:right; width:100px; height:320px; overflow:auto;">
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
</div>
</div>
+4
source to share
Why not put your item container to the right and then leave the left column, which is fixed?
.left { position:fixed;width:70% }
.right { float:right;width:30%; }
<div>
<div class="left">
This content is fixed and does not scroll
</div>
<div class="right">
<ul>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
<li>item></li>
</ul>
</div>
</div>
+1
source to share