How to move a div down?

Question

css

How can I move the "main" div which is in the "content" div below so that the "main" div is below the "logo" div and the "menu" div?

<div class="wrapper">
  <div class="logo">
  </div>
  <div class="menu">
    <ul>
      <li>Главная</li>
      <li>Ресторан</li>
      <li>Меню</li>
      <li>Адрес</li>
      <ul>
  </div>
      <div class="content">
        <div class="main">
        </div>
      </div>
</div>

body {
  padding: 0px;
  margin: 0px;
  background: url(http://i70.fastpic.ru/big/2015/0516/06/53122578295fcd3117e30a519cde3306.png);
}
.wrapper {
  background: black;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.logo {
  background: #FFE4B5;
  width: 300px;
  height: 320px;
  float: left;
}
.menu {
  width: 700px;
  height: 100px;
  float: left;
}
.menu ul {
  list-style-type: none;
  text-align: center;
  padding: 0px;
  margin: 40px 0px 0px 0px;
}
.menu ul li {
  background: white;
  float: left;
  padding: 14px 25px 14px 25px;
  font-size: 30px;
  font-family: sans-serif;
  margin-right: 2px;
}
.content {
  background: red;
  width: 900px;
  height: 1000px;
  padding: 0px;
  margin: 0px 0px 0px 100px;
}
.main {
  background: brown;
  width: 900px;
  height: 400px;
}

Answer 1

If I understand correctly, then
.main {clear:both;}