Fixed position and %width + not overlapping the footer

Fixed position and %width + not overlapping the footer

There is a project page of two Grids, a grid that showcase images on the
left side (width: 65%) and anther grid that show information about the
project on the right side (width 35%).
Here is the link to a Live Preview:
http://127.0.0.1:8020/LOAI%20Design%20Studio/portfolio/ambition-world.html
How to change the information grid that is on the right side to be fixed
and scroll with the page? and to stop before hitting the footer.
Note: I have tried to change the position to Fixed, it make it scroll but
the grid width keep stretching with the page and overflow the width of the
page which is 1030px.
I have tried lot of JavaScript snippets to make it scroll and stop at the
footer, but none worked. What would you recommend? without using a plugin.
The HTML of the page is as follows:
<!--Website Content--><div id="Page">
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">LOAI Design Studio</p>
</div>
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Logo</p>
<img alt="Ambition World Logo Design"
src="images/ambition-world-logo-mockup.jpg">
<p>Business Card &amp; a Mug Mockup</p>
<img alt="Ambition World Business Card Design"
src="images/ambition-world-bussiness-card-mockup.jpg">
</div><div class="detailsBox">
<h3>Ambition World General Trading </h3>
<p>This Logo and business card designed for my Dad's
Dubai based company.</p>
<p><strong>Skills:</strong> Graphic Design</p>
<p><strong>Date:</strong> 2013</p>
<p class="shareButtons"><strong>Share This Project
On:</strong>
<a href="http://facebook.com/LOAI.Design.Studio"
class="facebook"
onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog', 'width=626,height=436');
return false;"><span>Facebook</span></a>
<a href="https://twitter.com/share" class="twitter"
target="_blank"><span>Twitter</span></a></p>
<div>
<a onclick="history.go(-1);">Go Back</a>
<a href="#">Next Project</a>
<a class="scrollup">Go Up</a>
</div>
</div>
</div>
</div>
<!--Footer Section--><footer>
<div id="footer-sectionA">
<div class="footerContent">
<h3><strong>Want to get started?</strong></h3>
<p>I offer free, no-obligation consultation, will review
your project <br> &amp; discuss ways to achieve your goals
within your budget &amp; time frame.</p>
<p><a target="_blank"
href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&amp;s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&amp;v=1afd868e">Schedule
an Appointment Now</a></p>
</div>
</div>
<div id="footer-sectionB">
<div class="footerContent">
<p>Copyright ©2012 LOAI Design Studio. <br> All rights
reserved.<a href="../terms-and-conditions.html">Terms
&amp; Conditions.</a></p>
</div>
</div>
</footer>
</div><!--The End Of The Page-->
The CSS
/*Portoflio Project Page*/
#portfolio-projectPage{
text-align: left;
position: relative;
}
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img{
border: 1px solid #E8E8E8;
margin-bottom: 10px;
}
.imagesGrid p {
border-top: 1px solid #E8E8E8;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
width: 35%;
margin-top: 28px;
padding-left: 45px;
}
.detailsBox p {
border-bottom: 1px solid #E8E8E8;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p, h3 {
vertical-align: bottom;
}
.detailsBox a {
vertical-align: middle;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #E8E8E8;
margin: 0;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a{
background-color: #E8E8E8;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover{
color: #FFFFFF;
background-color: #456087;
}
.detailsBox div br {
display: none;
}
.shareButtons a {
margin-left: 3px;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.shareButtons a span {
display: none;
}