html - 为什么一个 div 正在移动到另一个？

Question

正如您在下面看到的，一个 div 正在向另一个移动。如何修复它并使页脚保持在页面底部？该表是由 PHP 制作的，但我认为这不会影响它。我尝试“玩”不同的位置，但没有给我正确的结果。

.body {
  margin: 0px;
  background-image: url(../images/background.png)
}
.tbl1 {
  font-family: Trebuchet MS;
  font-size: 12px;
  color: #000;
  background-color: #FFF;
  padding: 4x;
  margin-bottom: 5px;
  background-color: transparent;
}
.tbl2 {
  font-family: Trebuchet MS;
  font-size: 14px;
  background-color: #FFF;
  padding: 4x;
  margin-bottom: 5px;
  background-color: transparent;
}
.col-1-2 {
  width: 25%;
  border: 1px solid;
  border-radius: 10px;
  margin: 2px;
  background-color: #007dc1;
  padding-left: 6px;
  font-family: Trebuchet MS;
  border: 3px solid #005684;
}
.col-1-2-2 {
  width: 66%;
  border-radius: 10px;
  background-color: #007dc1;
  font-family: Trebuchet MS;
  padding-left: 12px;
  padding-bottom: 10px;
  border: 3px solid #005684;
}
.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  box-shadow: inset 0px 1px 0px 0px #54a3f7;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
  background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7', GradientType=0);
  background-color: #007dc1;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #124d77;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Trebuchet MS;
  font-size: 21px;
  font-weight: bold;
  padding: 14px 44px;
  text-decoration: none;
  text-shadow: 0px 0px 0px #154682;
}
.myButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
  background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1', GradientType=0);
  background-color: #0061a7;
}
.myButton:active {
  position: relative;
  top: 1px;
}
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*='col-'] {
  float: left;
  padding-right: 20px;
  /* column-space */
}
.grid {
  width: 100%;
  max-width: 1140px;
  min-width: 755px;
  margin: 0 auto;
  overflow: hidden;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid-pad {
  padding-top: 20px;
  padding-left: 20px;
  /* grid-space to left */
  padding-right: 0px;
  /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
  float: right;
}
/* Content Columns */

.col-1-1 {
  width: 100%;
}
.col-2-3,
col-8-12 {
  width: 66.66%;
}
.tarpas {
  width: 1%;
}
.footer {
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 900px;
  text-align: center;
  background-color: #007dc1;
  border-radius: 10px;
  margin-top: 10px;
  font-family: Trebuchet MS;
}
.span {
  text-align: center;
}
.tr3 {
  background-color: #343838;
  font-family: Trebuchet MS;
  font-size: 12px;
  text-align: center;
  color: #008C9E;
  font-weight: bold;
}
.tr4 {
  background-color: #343838;
  font-family: Trebuchet MS;
  font-size: 13px;
  text-align: center;
  color: black;
}
.reklama {
  height: 90px;
  width: 210px;
  border: 1.5px #000 solid;
  border-radius: 10px;
  vertical-align: middle;
}
.reklama1 {
  vertical-align: central;
  margin-top: 10px;
  margin-left: 7px;
}
.linija {
  background-color: black;
  color: black;
  height: 2px;
  border: 0px none;
  clear: both;
  border-radius: 5px;
  margin-left: 10px;
}
.tr5 {
  background-color: #343838;
  font-family: Trebuchet MS;
  font-size: 13px;
  text-align: center;
  color: green;
}
.tr6 {
  background-color: #343838;
  font-family: Trebuchet MS;
  font-size: 13px;
  text-align: center;
  color: red;
}
.tr7 {
  background-color: #343838;
  font-family: Trebuchet MS;
  font-size: 13px;
  text-align: center;
  color: #009;
}
.tr8 {
  background-color: #343838;
  font-family: Trebuchet MS;
  font-size: 13px;
  text-align: center;
  color: #FF6;
}

<a href="pirkimas.php" title="Pirkti" class="myButton">Pirkti</a>

<div class='col-1-2'>
  <h3 style='color: #FFF'>APIE MUS</h3>
  <a style='font-size: 80%;'>Daugeliui tikriausiai idomu, kas mes tokie ir ką mes galime Jums pasiulyti. „BetLt.net“ komanda sudaryta iš dideles grupes žmoniu.</a>
  <br>
  <br>
  <hr class="linija"></hr>
  <br>
  <a href="https://www.facebook.com/groups/304171889786369/">
    <div class='reklama'>
      <img align="center" src="images/reklama1.jpg" height="60px" width="190px" class='reklama1'>
    </div>
  </a>
  <br>
  <br>
</div>
<div class='col-1-2-2'>
  <h3 style='color: #FFF'>PASKUTINES PROGNOZĖS</h3>

  <?php include( "lentele.php"); ?>

</div>
<div class="footer" align="center">
  <p align="center" style='text-align: center; vertical-align: middle;'>Visos teises saugomos @ 2014</p>
</div>

Answer 1

让你的页脚类看起来像这样:

.footer {
position:relative;
float:left;
height : 40px;
width: 900px;
text-align: center;
background-color: #007dc1;
border-radius: 10px;
margin-top: 10px;
font-family: Trebuchet MS;
}

结果:http://jsfiddle.net/ub7rxnaa/