Почему DIV с формой идентификатора опускается ниже соседних DIV?
Я не могу правильно разместить 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 опускается. Что мне делать, чтобы все выровнялось? Стоит ли переделать размещение div?
Возникает вопрос: «Почему DIV с формой идентификатора опускается ниже соседних DIV?»
@godleuf Кроме того, я был бы признателен, если бы вы могли потратить некоторое время на создание минималистичной версии ошибочной разметки, чтобы опубликовать ее с вопросом. Если повезет, ваша ссылка перестанет работать задолго до того, как вопрос перестанет быть полезным для других.
Да, это разумный вопрос, плохо сформулированный. Идеально здесь, чтобы кто-то помог его переформулировать, а не предать забвению.
Ответы 2
Поскольку у вас есть два блока (ЭТАЖНЫЕ ПЛАНЫ и ИНФОРМАЦИЯ О РАЗРАБОТКЕ), каждый с рамкой, они теперь слишком широкие, чтобы располагаться рядом с блоком формы. Проверьте это, удалив одну или обе границы и посмотрев, появится ли форма снова там.
Обратите внимание, что отрицательная маржа часто имеет проблемы в IE6, убедитесь и сравните с этим любое решение.
Верх формы div соответствует верху предшествующей модели div. clear:left; на #projects перемещает #projects на следующую строку (хорошо) вместе со следующим содержимым (плохо). Попробуйте отрицательное верхнее поле или подумайте о реструктуризации HTML, чтобы поместить #form перед #projects.
Добавление следующего должно работать:
#form {
margin-top:-180px;
}
#projects {
border-right: 1px solid #FFFFFF;
}
Согласитесь, с Натаном ... можете ли вы задать реальный вопрос, чтобы остальная часть сообщества SO могла извлечь из этого пользу?