html - 如何使部分根据大小将其他部分向下推？

Question

所以在我的内容页面上，我在同一区域有几个不同的部分，但问题是顶部的文本穿过底部的标题。我已经设置了一个边距来定位底部，但它不会动态变化。我希望它根据上方区域中的文本量自行定位，并在需要时将其向下推。

问题是:

The problem

#content {
  margin-left: 130px;
  width: 706px;
  height: 700px;
  padding: 5px;
  font-size: 100%;
  text-align: left;
  background-color: #eee;
  vertical-align: top;
}
#content h1 {
  padding: 5px;
  font-weight: bold;
  background-color: #6272A0;
  font-size: 13px;
  margin-bottom: 2px;
  color: #FFFFFF;
  margin: 0px;
}
#highlights {
  width: 55%;
  float: left;
}
#highlights p {
  margin-left: 90px;
  margin-right: 30px;
}
#highlights img.thumb {
  margin-left: 5px;
  float: left;
  border: 1px #00366C solid;
}
#highlights img.icon {
  margin-left: 5px;
  float: left;
}
#highlights h1 {
  display: inline;
  color: #00366C;
  font-weight: bold;
  font-size: 10px;
  background: none;
}
#highlights a {
  color: #00366C;
}
#news {
  float: right;
  width: 45%;
}
#news h1 {
  font-weight: bold;
  background-color: #828CAA;
  font-size: 13px;
  color: #FFFFFF;
  margin-bottom: 5px;
}
#news a {
  color: #00366C;
  margin-top: 3px;
  padding-left: 5px;
  font-weight: bold;
}
#news p {
  padding-left: 5px;
  display: inline;
}
#news .avatar {
  vertical-align: top;
  margin: 0;
  float: left;
  border: 1px #00366C solid;
}
#gameupdates {
  margin-top: 40%;
}
#gameupdates h1 {
  background-color: #828CAA;
}

<section id="content">
  <h1>Today on Gaming World</h1>
  <br>
  <section id="highlights">
    <a href="http://gamingw.net/games/632">
      <img class="thumb" src="images/game-632.jpg" width="80" height="65">
      <h1>Coastercraft Gold</h1>
    </a>
    <img class="icon" src="images/maker-rmxp.gif">
    <p>Enter the World of CoasterCraft. Builds rides, hire staff and do all sorts of other Theme-park managemently-things in this fun and refreshing game.</p>
    <br>
    <br>
    <a href="http://gamingw.net/games/631">
      <img class="thumb" src="images/game-631.jpg" width="80" height="65">
      <h1>Cliche</h1>
    </a>
    <img class="icon" src="images/maker-gamemaker.gif">
    <p>Fight monsters explore dungeons and find valuable treasure in this dungeon raider game. Reminiscent of the classic arcade game Gauntlet.</p>
    <br>
    <br>
    <a href="http://gamingw.net/games/630">
      <img class="thumb" src="images/game-630.jpg" width="80" height="65">
      <h1>High Voltage</h1>
    </a>
    <img class="icon" src="images/maker-gamemaker.gif">
    <p>A neat Breakout clone with quite a few gameplay tweaks. Definitely worth checking out.</p>
    <br>
    <br>
    <a href="http://gamingw.net/games/629">
      <img class="thumb" src="images/game-629.jpg" width="80" height="65">
      <h1>Final Fantasy: Chaos Shadows</h1>
    </a>
    <img class="icon" src="images/maker-rm2k3.gif">
    <p>A thousand years ago, the magical kingdom of Heldanna was mysteriously destroyed, most of its history remains unknown. Now, in the present, an archaeological group has found one of Heldanna's greatest citadels.</p>
  </section>

  <section id="news">
    <h1>News</h1>
    <a href="">
      <img class="avatar" src="images/noavatar.gif" width="33" height="33">Review update #126,251,754</a>
    <br>
    <p>You should know the drill by now.</p>
    <br>
    <br>
    <a href="">
      <img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I'm alive.</a>
    <br>
    <p>And angry.</p>
    <br>
    <br>
    <a href="">
      <img class="avatar" src="images/noavatar.gif" width="33" height="33">Well now, what do we have here?</a>
    <br>
    <p>I do believe that it's a review update.....</p>
    <br>
    <br>
    <a href="">
      <img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I blame society.</a>
    <br>
    <p>Games! Games? Games?</p>
    <br>
    <br>
    <a href="">
      <img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">Fade may have lied.</a>
    <br>
    <p>Have I?</p>
    <br>
    <br>
    <a href="">
      <img class="avatar" src="images/bartavvy.gif" width="33" height="33">THE GAME DROUGHT IS OVER!</a>
    <br>
    <p>Click here for lots of exciting new games!</p>
    <br>
    <br>
  </section>
  <br>
  <section id="gameupdates">
    <h1>Game Updates and Articles</h1>

  </section>

</section>

Answer 1

#gameupdates
{
clear:both;
}

清除部分将解决问题