Как от % отнять px?

Question

[Имя Имечко]

Как от 100% отнять 15px?

calc() не помогает. При использовании этой функции все ломается и паддинг не 15px а все 100500px.

.search {
	width: 80%;
	margin: 0 auto 20px auto;
}

.form-wrapper {
	width: 100%;
	padding: 15px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 0 0 5px 0 #ccc;
}

.form-wrapper input {
	width: 80%;
	height: 20px;
	padding: 10px 5px;
	float: left;
	font-size: 15px;
	font-family: 'HelveticaBold', Arial, sans-serif;
	border: 0;
	background-color: #777;
	border-radius: 10px 0 0 10px;
}

.form-wrapper input:focus {
	outline: none;
	background: #888;
	color: #a8a8a8;
}

.form-wrapper button {
	position: relative;
	float: right;
	border: 0;
	padding: 0;
	cursor: pointer;
	width: 20%;
	height: 40px;
	font-size: 15px;
	font-family: 'HelveticaBold', Arial, sans-serif;
	line-height: 40px;
	color: #fff;
	text-transform: uppercase;
	background: #6189ee;
	border-radius: 0 10px 10px 0;
	text-shadow: 0 -1px 0 #d9534f;
}

<div class="search">
	<form class="form-wrapper cf">
		<input type="text" placeholder="Введите текс для поиска и нажмите Enter" required>
		<button type="submit">Найти</button>
	</form>
</div>

Суть в том, чтобы поле для поиска и кнопка найти были на одном уровне, впритирочку )))

Answer 1

[aphows]

Зачем использовать calc, когда в этом нет необходимости? К тому же, кроссбраузерность этого свойства страдает caniuse.com.
Вам поможет изменение блочной модели box-sizing: Реализация без calc .

Comments

[Имя Имечко]

хороший вариант, но не совсем понял что вы сделали

[aphows]

1) Когда вы указываете ширину и используете padding, то он добавляется к ширине. То есть вы хотели 80% ширины, а с padding получили еще несколько ненужных пикселей. От этого можно избавиться изменением блочной модели box-sizing. Значение border-box помещает padding внутри ширины. В вашем примере нужно добавить несколько свойств:
.form-wrapper input {
box-sizing:border-box;
height:40px; // раньше высота была 20 и вертикальный паддинг по 10, поскольку паддинг теперь считается внутри, высоту нужно увеличить на 20
}

Answer 2

[Имя Имечко]

Все я разобрался.

.form-wrapper input {
	width: calc(80% - 10px);
}

Comments

[Котик Антон]

— Как от 100% отнять 15px?
— Все я разобрался: calc(80% - 10px)

[dk-web]

27cm: ))))))

[Никита Гущин]

27cm: xD