如何改变溢出？

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>&nbsp;</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