why div id form dropping next adjacent divs?

i can't justly position div form layout.

by looking during div chain css below, does anyone have an thought i doing wrong?

#floorplans {
  float: left;
  height: 165px;
  width: 203px;
  border-right: 1px plain #ffffff;
  border-bottom: 1px plain #ffffff;
  position: relative;
  background: #ffffff url(https://lorempixel.com/320/170/) no-repeat;
  padding-top: 14px;
  padding-left: 20px;
  display: block;
  color: #000000;
  line-height: 1.5em;
  padding-right: 10px;
}

#development {
  float: left;
  height: 165px;
  width: 204px;
  border-right: 1px plain #ffffff;
  border-bottom: 1px plain #ffffff;
  position: relative;
  background: #ffffff url(https://lorempixel.com/204/165/) no-repeat;
  padding-top: 14px;
  padding-left: 20px;
  display: block;
  color: #000000;
  line-height: 1.5em;
  padding-right: 10px;
}

#projects {
  background: #ffffff url(https://lorempixel.com/153/127/) no-repeat;
  height: 127px;
  width: 153px;
  text-align: left;
  padding-left: 300px;
  color: #333333;
  padding-top: 25px;
  display: block;
  float: left;
  position: relative;
  line-height: 1.5em;
  font-size: 10px;
  padding-right: 15px;
  clear: left;
}

#form {
  background: #990000 url(https://lorempixel.com/450/309/) no-repeat;
  float: left;
  height: 309px;
  width: 450px;
  position: relative;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  color: #ffffff;
}

<div id="wrapper">
  <div id="logo"></div>
  <div id="topnav"></div>
  <div id="nav">
    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
      <li id="last"><a href="#">link4</a></li>
    </ul>
  </div>
  <div id="gallery"></div>
  <div id="floorplans"></div>
  <div id="development"></div>
  <div id="projects"></div>
  <div id="form">
    <div>
    </div>

    <div id="footer"></div>
  </div>

you'll notice div form dropping down. should i things line up? should i redo chain divs?