Проблемы CSS с макетом из 2 столбцов для контактной формы

Я использую плагин wordpress под названием контактная форма 7 для создания своих контактных форм. Я сделал макет с двумя столбцами с помощью CSS, который выглядит нормально. Но когда вы нажимаете кнопку ОТПРАВИТЬ, сообщение проверки или сообщение об ошибке, которое появляется после отправки сообщения, отображается не в том месте. Он должен отображаться прямо под формой (или прямо под кнопкой ОТПРАВИТЬ.

На самом деле сообщение отображается прямо под формой, потому что почему-то мои ярлыки, текстовые поля считаются вне формы. В режиме отладки Chrome я обнаружил, что высота формы состоит из моего:

<div id="contact-email">
<h2>Contact form</h2>
</div>

и <p id="contact-intro"></p>

Я не понимаю, почему это не доходит до кнопки ОТПРАВИТЬ. JS немного длинный, поэтому вот jsfiddle, если вы хотите проверить js и css http://jsfiddle.net/sd82m/ Я думаю, что лучше взглянуть на мой веб-сайт тестирования, чтобы вы могли нажать кнопку ОТПРАВИТЬ (вы не можете сделать это на jsfiddle) http://mywptestsite.is-great.org/contact-form/ Спасибо -K


wordpress forms jquery css contact-form-7
person Kimberley Furson    schedule 02.02.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward 

.wpcf7-response-output {
    clear: both;
}

Так что он очистит как левые, так и правые div.

person alexp    schedule 02.02.2014

arrow_upward
0
arrow_downward

Попробуйте добавить это свойство в CSS всех ваших div, содержащих части формы:

overflow:hidden;
person Manuel Bécares    schedule 02.02.2014

arrow_upward
0
arrow_downward

Пытаться,

.wpcf7-response-output {
float: left;
margin-left: 452px;
width: 459px;
}
person Mohd Abdul Mujib    schedule 02.02.2014