Hello,
I have 3 div tags on my Web page. I will like to learn how to make ONLY the middle div tag to be scrollable, while the left and right div tags will be fixed.
So that when user scrolls the Web page, the middle div tag will scroll. Just like we have in social media platforms like Facebook and Twitter.
<div class="container" style="max-width: 100%;">
<div class="row" style="max-width: 100%; margin: 0 auto;">
<div class="fixedcontainer col-md-2 d-none d-sm-inline-block">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<asp:Label ID="Label1" runat="server" Font-Size="13pt" Text="" >SAMUEL VICTOR</asp:Label><hr />
</center>
<nav id="sidebar">
<ul class="list-unstyled components">
<li>
<a href="#">
<img alt="" src="images/navbarimg/house.png" height="20" /> Home</a>
</li>
<li class="active">
<a href="#">
<img alt="" src="images/navicon/profile-icon.png" height="20" /> My Profile</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<br />
<asp:TextBox ID="Textsearch" runat="server" Text="" Width="100%" CssClass="form-control" Font-Size="10pt"
placeholder="Search Profiles"></asp:TextBox>
<br />
<br />
<div class="row">
<div class="col">
<h3 id="heading">User Profile</h3>
<br />
</div>
</div>
<div class="row" style="margin-top: 2%; max-width: 100%;">
<div class="col-md-3">
<asp:Image ID="imgFile" runat="server" Width="120" Height="120" />
</div>
<div class="col-md-6">
<asp:Label ID="LblprofileName" runat="server" Text="John Tom"></asp:Label>
<br />
<img src="images/navicon/locatn.png" height="17" /> <asp:Label ID="location" runat="server" Text="Southern Region"></asp:Label>
<br />
<br />
<label id="storylbl" runat="server">It's our privilege to have you all in this Noble group.
I strongly believe that every one of us have dreams and aspirations in life but we all need a
Vehicle to take us to where we are going.</label>
</div>
</div><br />
<hr />
<div class="card">
<div class="card-body" style="max-width: 100%; margin: 0 auto;">
<div class="row">
<div class="col">
<div class="col-md-6">
<asp:Label ID="lblheadline" runat="server" Text="Headlines"></asp:Label>
<asp:Label ID="lblhistory" runat="server" Text="activities history"></asp:Label>
</div>
</div>
<br />
<div class="row">
<asp:Label ID="desclbl" runat="server" Text="Graphic Designer"></asp:Label>
<%=DateTime.Now.Year%>
</div>
<br />
<br />
<label id="Label2" runat="server">
It's our privilege to have you all in this Noble group.
I strongly believe that every one of us have dreams and aspirations in life but we all need a
Vehicle to take us to where we are going.</label>
<br />
<br />
<div class="row">
<div class="col-md-5">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/NBA-2K14-Free.jpeg" Height="150" />
</div>
<div class="col-md-4">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/NBA-2K14.jpg" Height="150" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fixedcontainer col-md-2 d-none d-sm-inline-block" style="margin-top: 1%;">
<div class="row" style="max-width: 100%; margin-left: 4%;">
<div class="col-md-8">
<asp:Image ID="profileImage" ImageUrl="~/images/NBA-2K14.jpg" runat="server" Width="30" Height="30" />
<asp:Label ID="prolbl" runat="server" Text="Samuel Victor"></asp:Label>
</div>
<div class="col-md-2">
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()"><i class="fade fa-caret-down"></i></button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Edit</a>
<a href="#">Colleagues</a>
<a href="#">Log Out</a>
</div>
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<h4>Publisher List</h4>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
