为什么插入内容时，内容下方的html消失了

我正在为我的一个模块创建一个网站，每次我调用数据库中的信息以将这个"内容div 类"下面的所有 html 都消失了，有人知道为什么吗？

下面是作品的 php 页面：

<link rel="stylesheet" href="css/productiontable.css">
<?php 
error_reporting(0);
require './db/connect.php';
include './includes/header.php'; 
?>
<h2>Productions</h2>
<div class="productiontable">
    <h3>What's on at this theatre</h3>
    <?php 
        if($result = $connection->query("SELECT * FROM Production")){
                        if($count = $result->num_rows){
                            while($row = $result->fetch_object()){
    ?>
    <div class="centredinfo">
        <div class="coloumns">
            <div class="productionname">
                <?php echo $row->ProductionName; ?>
            </div>
            <div class="productiontype">
                <?php echo $row->ProductionType; ?>
            </div>
            <div class=""></div>
            <div class="clear"></div>
        </div>
     </div>            
    <?php           }
    $result->free();
            }
    } 
    echo $result; 
    mysqli_close($connection);
    ?>
    <p>please click on productions for more info</p>
</div>               
<?php include './includes/footer.php'; ?>

这是整个站点的主文档：

@import url(http://fonts.googleapis.com/css?          family=Indie+Flower|Lobster|Pacifico|Dosis);
/*Reseting the design on the page*/
*{padding: 0; margin: 0;}
/*Whole Page*/
body{
    font-family: 'Dosis';
    font-size: 14px;
    background-color: bisque;
}
/*The box putting all information in middle*/
.container{
    width: 960px;
    margin: auto;
}
/*Header*/
.header{
    width: 945px;
    text-align: center;
    font-size: 45px;
    background-color: grey;
    color: white;
    -webkit-box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    -moz-box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border: 2px black solid;
    margin-top: 10px;
    padding: 5px;
    height: 82px;
    font-family: 'Pacifico';
}
.theatreleft, .theatreright{
    width: 80px; height: 80px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}
.theatreleft{float: left;}
.theatreright{float: right;}
/*Navigation*/
.navigation{
    height: 40px;
    width: auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    background: linear-gradient(top, grey 0%, black 100%); 
    background: -webkit-linear-gradient(top, grey 0%, black 100%); 
    background: -moz-linear-gradient(top, grey 0%, black 100%); 
    background: -ms-linear-gradient(top, grey 0%, black 100%); 
    margin-top: 10px;
    border: black 2px solid;
}
.navigation li{
    list-style: none;
    float: left;
    display: inline-block;
    height: 40px;
    position: relative;
}
.navigation li a{
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: white;
    font-size: 15px;
    padding: 0;
    margin: 0;
    line-height: 30px;
    text-align: center; 
}
.navigation li:first-child a{border-left: none;}
.navigation li:last-child a{border-left: none;}
.navigation li:hover > a{color: #00ccff;}
.navigation ul li a{
    width: 100px;
    text-align: center;
    padding-top: 5px;
    margin-left: 25px;
    margin-right: 25px;
}
/*Sub Menu*/  
.navigation li ul{
     position: absolute;
     opacity: 0;
     background: black;
     top: 40px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
}
.navigation ul li:hover > ul{
     opacity: 1;
}
.navigation ul li ul li{
     height: 0;
     overflow: hidden;
     padding: 0;
     border-bottom: 1px solid grey;
}
.navigation ul li:hover > ul li{
     height: auto;
     overflow: visible;
}
.navigation ul li ul li a{
     width: 100px;
     margin-left: 22px;
     border: none;
     text-align: center;
}
.navigation ul li:first-child a{
     border: none; 
}
/*Content Below the navigation*/
.content{
    height: 500px;
    background-color: grey;
    -webkit-box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    -moz-box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    border: 2px black solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    margin-top: 10px; 
 }
 /*The paragraph element of the content box*/
 .content p{
    padding: 15px;
    color: white;
    width: 94%;
    margin: 10px;
 }
 /*Footer at the bottom*/
 .footer{
    background-color: grey;
    -webkit-box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    -moz-box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    box-shadow: inset -3px 1px 30px 13px rgba(0,0,0,0.37);
    border: 2px black solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
 }

和用于生产表的 CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
h2{
    text-align: left;
    color: white;
    font-family: 'Dosis';
    margin: 10px;
    font-size: 32px;
}
h3{
    font-size: 18px;
    color: white;
    margin: 20px;
}
.centredinfo{
    width: 900px;
}
.coloumns{
    width: 600px;
    margin: 0 auto;
}
.coloumns div{
    width: 300px;
    float: left;
}

有人知道为什么吗？？

非常感谢