how to change overflow? - php

Question

I am doing a college project. I need to change the scrolling position from Horizontal to Vertical, But that's not working. Here I'm using PHP and HTML, CSS. Can any one fix my code please? I am new to css.
This is my current output:
My code:
<style>
div.boxx
{
background-color:#9C0;
width:150px;
height:150px;
margin-left:20px;
text-align:center;
float:left;
}
div.boxx:hover
{
background:#333;
}
div.inside1
{
width:100px;
height:100px;
margin-left:auto;
margin-right:auto;
position:relative;
margin-top:10px;
bottom:0px;
border:solid #666;
border-width:thin;
}
div.inside2
{
width:auto;
height:40px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
text-align:center;
}
div.button1
{
width:15px;
height:25px;
left:85px;
float:right;
position:absolute;
top:0px;
}
table.main_table
{
margin-left:auto;
margin-right:auto;
width:auto;
}
tr.toptr
{
background:url(images/available_gallary_top.png) no-repeat;
height:38px;
}
tr.boatamtr
{
background:url(images/available_gallary_bottam.png) no-repeat;
height:7px;
}
tr.fulltr
{
background:url(images/available_gallary_bg.png) repeat-y;
}
div.gal_cantiner
{
background-color:#09C;
width:869px;
margin-left:2px;
height:152px;
overflow:auto;
}
input.delet_gal_bt
{
width:13px;
height:13px;
background:url(images/delet_gal_bt.png) no-repeat;
border:none;
}
input.delet_gal_bt:hover
{
background:url(images/delet_gal_bt_h.png) no-repeat;
}
input.remove_gal_bt
{
width:13px;
height:13px;
background:url(images/remove_gal_bt.png) no-repeat;
border:none;
}
input.remove_gal_bt:hover
{
background:url(images/remove_gal_bt_h.png) no-repeat;
}
span.gallary_date_text
{
color:#666;
font-size:9px;
line-height:15px;
}
</style>
<?php
session_start();
include "config.php";
error_reporting(0);
echo "<br>";
$crt=0;
$sql= mysql_query("SELECT * FROM new_gallary",$con);
echo "<table class='main_table' border='0' align='center'><tr class='toptr'><td> </td></tr><tr class='fulltr'><td><div class='gal_cantiner' id='gal_cantiner'>";
while($row = mysql_fetch_array($sql))
{
echo "<div class='boxx' id='boxx".$crt."'><div class='inside1'><img src='".$galimg."' width='100' height='100'><div class='button1'><input type='button' class='delet_gal_bt' onclick='deleted_gallary(".$row['id'].")'/><input type='button' class='remove_gal_bt' onclick='remove_for_gallary(".$row['id'].")'/></div></div><div class='inside2'>".$row['gallary_name']."<br><span class='gallary_date_text'>".$row['gallary_date']."</span></div></div>";
$crt++;
}
echo "</div></td></tr><tr class='boatamtr'><td></td></tr></table>";
?>

Answer 1

I finally found the answer. I add a new style line into the tr that will inside of the loop like this:
$l=$l+100;
echo"
<div class='boxx' id='boxx".$crt."' style="margin-left:".$l."px;margin-top:-160px;">
<div class='inside1'>
<img src='".$galimg."' width='100' height='100'>
<div class='button1'>
<input type='button' class='delet_gal_bt' onclick='deleted_gallary(".$row['id'].")'/>
<input type='button' class='remove_gal_bt' onclick='remove_for_gallary(".$row['id'].")'/>
</div>
</div>
<div class='inside2'>".$row['gallary_name'].">
<br>
<span class='gallary_date_text'>".$row['gallary_date']."</span>
</div>
</div>
";
style="margin-left:".$l."px; margin-top:-160px;
THe Final Output:Image

Answer 2

Try this.
overflow: auto;
overflow-x: hidden;
And please cut short the code : sscce

Answer 3

#user1126301 your code doesn't seems to have any scroll bars. It just uses the existing images.
You should add this in your css:
overflow-y: scroll; overflow-x: hidden; padding-right: 5px;
visibility: visible; border: thin solid white; background-color:#336699;
scrollbar-face-color: #336699; scrollbar-3dlight-color: #336699;
scrollbar-base-color: #336699; scrollbar-track-color: #336699;
scrollbar-darkshadow-color: #000; scrollbar-arrow-color: #000;
scrollbar-shadow-color: #fff; scrollbar-highlight-color: #fff;