input вылазит за границы div

[dixonn]

input вылазит за границы div
не пойму в чем проблема, поясните...

Для просмотра ссылки Войди или Зарегистрируйся

 

[igumenov]

.searchform
1) margin 2 раза пишешь
2) margin если делаешь по 3% то на выходе ширина будет не 100% а 106%, соответственно длина должна быть 94%

.searchform {

margin: 3%;
border: 1px solid;
border-color: #e5e5e5;
background: #f5f5f5;
font-size: 20px;
width: 94%;
}

 

[dixonn]

Просто говорили что лучше делать все значения в % т.к. влияет на резиновую ширину. Это так? Или в таких элементах этого не заметно?

Сделал через функцию calc

 

[zALEHANz]

Не советовал бы использовать % в маржинах и пэдингах. Я бы убрал маржины с input и назначил пэдинг для form. И еще момент, для input не прописан display: block, для inline-block margin: 0px auto не работает

 

[vytyacom]

Не знаю решена ли проблема, но я немного изначальный ваш код Для просмотра ссылки Войди или Зарегистрируйся. Так же убрал маргин у инпута, вместо этого добавил на форму паддинг.
Когда у инпутов (ну и в принципе у любых блоков) есть паддинги и еще он width: 100%, то обязательно обратите внимание на box-sizing. По умолчанию паддинги не включаются в общую ширину, т.е. box-sizing: content-box, для того чтобы границы блока и паддинги входили в ширину (ну или в конкретные 100%) надо у блока указать box-sizing: border-box.
В интернете в принципе много информации по этому поводу если интересно.