Javascript-форум - Позиционирование изображения в фоне input

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Позиционирование изображения в фоне input (https://javascript.ru/forum/dom-window/46359-pozicionirovanie-izobrazheniya-v-fone-input.html)

Позиционирование изображения в фоне input

Всем привет.
Есть вот такая верстка:

Прикол в том что при изменении экрана иконка с лупой перемещается в плохом направлении, то есть если расширение более 1000пх то норм, а вот стили адаптиновсти прописаны на диапазон: 768 / 999

и получается что нужно еще будет специально прописывать стили этого инпута для расширения например 785, когда он сьехал.

Короче говоря если блок 100%, а картинка 37 пх по высоте и ширине 36 пх как ее прикрутить раз и навсегда?

Для примера предлагаю посмотреть мои потуги в "адаптивном бою" http://duvanov.url.ph/

Код:

.col span_1_of_4{

width: 100%

}

#search {

    width: 100%;

    height: 37px;

    position: relative;

    padding: 0;

    margin: 0;

    margin-bottom: 10px;

}

#search input[type=text] {

    border: 0;

    border: none;

    border: 1px solid #87c602;

    -webkit-border-radius: 7px 0 0 7px;

    -moz-border-radius: 7px 0 0 7px;

    -ms-border-radius: 7px 0 0 7px;

    -o-border-radius: 7px 0 0 7px;

    border-radius: 7px 0 0 7px;

    padding: 9px;

    margin: 0;

    height: 16px;

    font: bold 16px calibri;

    color: #a3a4a5;

}

#search input[type=submit] {

    background: none;

    border: 0;

    border: none;

    width: 36px;

    height: 37px;

}

#search_btn {

    width: 36px;

    height: 37px;

    background: url(../img/search/search_btn.png);

    background-repeat: no-repeat;

    vertical-align: middle;

    position: absolute;

    right: 5px;

    top: 0;

}

<div class="col span_1_of_4">
                <div id="search">
                    <form method="get" action="mysite.com">
                        <input type="text" name="q" value="поиск" onfocus="this.value=''" onblur="if (this.value==''){this.value='поиск'}">
                        <div id="search_btn">
                            <input type="submit" value="&nbsp;">
                        </div>
                    </form>
                </div>

Duda.Ml1986@gmail.com, именно "поиск" к адаптивности никаким боком...
Все можно решить как-то так

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
#content {
	width: 70%;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
#find_box {
	position: relative;
	width: 100%;
	height: 20px;
	border: 1px solid green;
}
#find_data {
	height: 100%;
	margin-right: 20px;
}
#find {
	width: 100%;
	height: 100%;
	border: none;
}
#find_btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 100%;
	background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='content'>
	<div id='find_box'>
		<div id='find_data'>
			<input  id='find' type='text' />
		</div>
		<div id='find_btn'></div>
	</div>
</div>
</body>
</html>

Благодарствую за ответ) Оказывается ошибка была в задании ширины инпута, исправил и все сразу окейно стало.