Подскажите, умные люди!

[My}I{uK]

есть форма,которую нужно разместить на всю ширину блока,и все бы хорошо,но когда добавляешь к текстовому полю рамку все плывет! как выйти из этой ситуации,чтоб форма с рамкой заняла всю ширину блока?

 

<style>

.width {

width: 224px;

height: 100px;

margin: 0 auto;

border: 1px solid ;

}

input[type=text] {

width: 144px;

outline: none;

float: left;

height: 33px;

border: none;

line-height: 1;

font-size: 12px;

padding-left: 10px;

/* border: 1px solid; */

}

button {

border: none;

width: 70px;

height: 35px;

}

</style>

 

 

 

<div class="width">

<form action="#" method="POST">

<input type="text" placeholder="Text...">

<button>Кнопка</button>

</form>

</div>

 

[Q4Dizzy]

box-sizing: border-box;

[atlanta]

https://jsfiddle.net/atlanta/kqn1zea5/  так ?

[My}I{uK]

box-sizing: border-box;

а присваивать к какому элементу?

https://jsfiddle.net/atlanta/kqn1zea5/  так ?

Спасибо! Все как я хотел!

Подскажите только,в чем именно была моя ошибка? 

[atlanta]

 

box-sizing: border-box;

а присваивать к какому элементу?

https://jsfiddle.net/atlanta/kqn1zea5/  так ?

Спасибо! Все как я хотел!

Подскажите только,в чем именно была моя ошибка? 

 

 я и не помню что я менял - вообще по памяти скажу - не ставьте высоту - она должна быть auto так проще в этом ошибка

Edited December 5, 2015 by atlanta

[My}I{uK]

Спасибо большое!

[Q4Dizzy]

Советую почитать по этой части, а так же про обтекания и очистку.