how to add scrollbar in fixed container - php

Question

I want to add scrollbar in a fixed container of cart products so that when I will add too many products in cart, I can view it easily by scrolling down the products in the container
Here is the HTML code of the container
?>
<div class="right_nav" >
<div class="right_nav_top">
Your Cart
</div>
<hr width="130px">
<table width="167" border="0" cellpadding="0" cellspacing="0" style="font-size:12px; margin:5px; overflow:auto">
<?php
//iterate through the cart, the $product_id is the key and $quantity is the value
foreach($_SESSION['cart'] as $product_id => $quantity) {
//get the name, description and price from the database -
//this will depend on your database implementation.
//use sprintf to make sure that $product_id is inserted into the query as a number -
//to prevent SQL injection
$sql = sprintf("SELECT
event_title,
event_desc,
price
FROM events
WHERE id = %d;",
$product_id);
$result = mysql_query($sql);
//Only display the row if there is a product
//(though there should always be as we have already checked)
if(mysql_num_rows($result) > 0) {
list($name, $description, $price) = mysql_fetch_row($result);
$line_cost = $price * $quantity; //work out the line cost
$totals = $total + $line_cost; //add to the total cost
?>
<tr>
<td colspan="3"><?php echo $name;?></td>
</tr>
<tr>
<td width="31"><?php echo $quantity;?>x</td>
<td width="59">&pound<?php echo $line_cost?></td>
<td width="70">
<a href="<?php Site_titte();?>/viewcart.php?action=add&id=<?php echo $product_id;?>" title="Add">
<img src="<?php Site_titte();?>/images/addred.png" width="24" height="24" border="none">
</a>
<a href="<?php Site_titte();?>/viewcart.php?action=remove&id=<?php echo $product_id;?>" title="Remove">
<img style="margin-bottom:6px;" src="<?php Site_titte();?>/images/icon_close.png" border="none"></a></td>
</tr>
<?php }}?>
</table>
<?php
if(!isset($_SESSION['uid']))
{$link="login.php";}
else
{$link=Site_titte()."/order.php";}
?>
<hr width="130px">
<div class="total_main">
<div class="total_p1">Total</div>
<div class="total_p2">&pound<?php echo $total ?></div>
<div class="clearfix"></div>
</div>
<br>
<center>
<a href="<?php echo $link;?>">
<img src="<?php Site_titte();?>/images/btn_order.png" border="none" width="140" height="38">
</a>
</center>
</div>
<?php
}
else {
?>
<div class="right_nav2">
<div class="right_nav_top2">
Your Cart
</div>
<hr width="130px">
<table border="0" cellpadding="0" cellspacing="5" style="font-size:14px; margin:5px;">
<tr>
<td colspan="3">Your cart is empty.</td>
</tr>
</table>
and this is the css code
.right_nav2{
position: fixed;
bottom: 0px;
right: 0;
top:220px;
margin: 0 10px 10px 0;
border: #DBDBDB 1px solid;
border-radius: 5px;
background-color:#fff;
height:150px;
width:150px; }
.right_nav_top2{
position:relative;
background:url(images/icon_cart_small.png) right no-repeat;
color:#214200;
margin: 12px;
font-size: 19px; }
.right_nav{
position: fixed;
right: 0;
top:220px;
border: #DBDBDB 1px solid;
border-radius: 5px;
background-color:#fff;
style="max-height: 552px;;
width:150px; }
.right_nav_top{
position:relative;
background:url(images/icon_cart_small.png) right no-repeat;
color:#214200;
margin: 12px;
font-size: 19px;}
.total_main{
position:relative;
background:#dbdbdb;
font-size: 14px;}
.total_p1{
position:relative;
float:left;
margin: 5px 11px 5px 12px;}
.total_p2{
position:relative;
float:left;
margin: 5px 11px 5px 0px;}
Please help me where should I edit to add a scrollbar in this container

Answer 1

You can add overflow-y or overflow-x to achieve this depending on which direction you want to scroll. I'm guessing you want to scroll up and down. So when your div increases in content (products) past it's limits, a scroll bar will appear for the div. See the example below:
Example:
<!-- Scroll bar present but disabled -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
test
</div>
<!-- Scroll bar present and enabled -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
</div>

Answer 2

add
overflow:scroll
to the to the element you want to have the scroll bar.