Почему DIV с идентификационной формой опускается ниже соседних DIV?

Question

Я не могу правильно расположить div form в моем макете.

Глядя на мое расположение div и css ниже, кто-нибудь понимает, что я могу делать неправильно?

#floorplans {
  float: left;
  height: 165px;
  width: 203px;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #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 solid #FFFFFF;
  border-bottom: 1px solid #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>

Вы заметите, что div form падает. Что я должен сделать, чтобы все выстроилось в очередь? Должен ли я переделать размещение дивов?

Answer 1

Вершина div формы соответствует вершине div, которая предшествует ей. clear:left; на #projects перемещает #projects на следующую строку (хорошо) вместе со следующим содержимым (плохо). Попробуйте использовать отрицательное верхнее поле или реструктурируйте свой HTML, чтобы поставить #form перед #projects.

Добавление следующего должно работать:

#form {
    margin-top:-180px;
}
#projects {
    border-right: 1px solid #FFFFFF;
}

Answer 2

Поскольку у вас есть два блока (FLOORPLANS и INFELOPMENT INFO) каждый с рамкой, они теперь слишком широкие, чтобы сидеть рядом с блоком формы. Проверьте это, удалив одну или обе границы и посмотрев, появляется ли там форма.

Обратите внимание, что отрицательная маржа часто имеет проблемы в IE6, обязательно проверьте и проверьте любое решение.