Перемещаем кнопку поиск (Search)

[L4D2]

Не могу переместить кнопку поиска в правый бок от формы ввода текста.

Как выглядит:

			<div class="mainSearch">				<form class="form-wrapper">					<input type="text" id="search" placeholder="Всегда готов для поиска..." required>					<input type="submit" value="Искать" id="submit">				</form>			</div>

.mainSearch{position:absolute;right:15%;top:4px;}.form-wrapper #search {	width: 90%;	height: 0px;	padding: 10px 5px;	font: bold 13px 'lucida sans', 'trebuchet MS', 'Tahoma';	border: 1px solid #ccc;	-moz-border-radius: 3px;	-webkit-border-radius: 3px;	border-radius: 3px;      }.form-wrapper #search:focus {	outline: 0; 	border-color: #aaa;	-moz-box-shadow: 0 1px 1px #bbb inset;	-webkit-box-shadow: 0 1px 1px #bbb inset;	box-shadow: 0 1px 1px #bbb inset;  }.form-wrapper #search::-webkit-input-placeholder {   color: #999;   font-weight: normal;}.form-wrapper #search:-moz-placeholder {	color: #999;	font-weight: normal;}.form-wrapper #search:-ms-input-placeholder {	color: #999;	font-weight: normal;} .form-wrapper #submit {	float: right;	border: 1px solid #00748f;	height: 20px;	width: 70px;	padding: 0;	cursor: pointer;	font: bold 15px Arial, Helvetica;	color: #fafafa;	/* text-transform: uppercase; */ /* Выделяет жирным большим текстом */  	background-color: #0483a0;	background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));	background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);	background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);	background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);	background-image: -o-linear-gradient(top, #31b2c3, #0483a0);	background-image: linear-gradient(top, #31b2c3, #0483a0);	-moz-border-radius: 3px;	-webkit-border-radius: 3px;	border-radius: 3px;      	text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);}  .form-wrapper #submit:hover,.form-wrapper #submit:focus {			background-color: #31b2c3;	background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));	background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);	background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);	background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);	background-image: -o-linear-gradient(top, #0483a0, #31b2c3);	background-image: linear-gradient(top, #0483a0, #31b2c3);}	  .form-wrapper #submit:active {	outline: 0;    	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;    }  .form-wrapper #submit::-moz-focus-inner {	border: 0;}

Как ее исправить, и поставить на правый фланг.

[klierik]

ссылку на сайт или вылодить проблему на jsfiddle

так же прочитать как правильно задать вопрос по ссылке в подписи

[vera17]

http://jsfiddle.net/7hyLL/1/

[klierik]

в Chrome  все окей.

[vera17]

Спасибо, поправила

http://jsfiddle.net/7hyLL/3/

[L4D2]

Спасибо, поправила

http://jsfiddle.net/7hyLL/3/

Спасибо большое, выручили меня.

А как между ними сделать отступ ?

Edited February 21, 2014 by L4D2

[klierik]

А как между ними сделать отступ ?

используй, например, margin: 

[L4D2]

 

А как между ними сделать отступ ?

используй, например, margin:

 

Делал, у меня форма ввода сдвигается вниз:

 

.form-wrapper #search {margin: 4px;width: 180px;height: 18px;padding: 0 5px;font: bold 13px 'lucida sans', 'trebuchet MS', 'Tahoma';border: 1px solid #ccc;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;float:left;}

Edited February 21, 2014 by L4D2

[klierik]

margin-left: 10px;

на кнопку, например.

 

рассматривать код в рамках форума бессмысленно. выкладывай как я уже говорил выше.

[L4D2]

margin-left: 10px;

на кнопку, например.

 

рассматривать код в рамках форума бессмысленно. выкладывай как я уже говорил выше.

 

Спасибо, получилось.