Блок выпадает с блока

[FitTech]

Здравствуйте! Подскажите в чем проблема?

<div class="header-search">	<div class="header-title">	</div>	<div class="block-search">	</div></div>

и сss

.header-search{width: 100%;height: 104px;background: url("img/1.jpg") repeat-x;}.header-title{width: 455px;height: 90px;border: 1px solid red;margin-right: 10px;display: inline-block;}.block-search{width:453px;border: 1px solid red;display: inline-block;height: 90px;}

Далее,

<div class="header-search">	<div class="header-title">	<span style="padding-top: 33px; display: block; font-family: Tahoma;font-weight: bold; font-size: 48px; color: #ff8400;">MOBI<span style="font-weight: bold;font-family: Tahoma; font-size: 48px; color: #9c9c9c;">SHOP</span></span>	<div class="block-search">	</div>

Далее,

<div class="header-search">	<div class="header-title">	<span style="padding-top: 33px; display: block; font-family: Tahoma;font-weight: bold; font-size: 48px; color: #ff8400;">MOBI<span style="font-weight: bold;font-family: Tahoma; font-size: 48px; color: #9c9c9c;">SHOP</span></span>	<p style="display:inline-block; padding-top: 15px; padding-left: 3px; font-family: Tahoma Regular; font-size: 12px; color: #cdcdcd; text-transform: uppercase;">интернет-магазин мобильной электроники</p>	<a href="#" style="padding-left: 10px; text-decoration: none; color: #4e7aa9; font-family: Tahoma Regular; font-size:12px;">Регистрация</a> <a href="#" style="padding-left: 10px; text-decoration: none; color: #4e7aa9; font-family: Tahoma Regular; font-size:12px;">Вход</a>	</div>		<div class="block-search">	</div>	</div>

И вот,

<div class="header-search">	<div class="header-title">	<span style="padding-top: 33px; display: block; font-family: Tahoma;font-weight: bold; font-size: 48px; color: #ff8400;">MOBI<span style="font-weight: bold;font-family: Tahoma; font-size: 48px; color: #9c9c9c;">SHOP</span></span>	<p style="display:inline-block; padding-top: 15px; padding-left: 3px; font-family: Tahoma Regular; font-size: 12px; color: #cdcdcd; text-transform: uppercase;">интернет-магазин мобильной электроники</p>	<a href="#" style="padding-left: 10px; text-decoration: none; color: #4e7aa9; font-family: Tahoma Regular; font-size:12px;">Регистрация</a> <a href="#" style="padding-left: 10px; text-decoration: none; color: #4e7aa9; font-family: Tahoma Regular; font-size:12px;">Вход</a>	</div>		<div class="block-search">	<form class="form-wrapper cf">	    <input type="text" placeholder="Введите здесь слово, которое нужно найти..." required>	    <button type="submit">Искать</button>	</form>	</div>	</div>

Почему они "прыгают" и как решить задачу?
Спасибо!

[Switch74]

а выложить куда-то не могли? у меня получается ваш конечный вариант вот таким http://jsfiddle.net/6hxstj45/

[FitTech]

  On 12/23/2014 at 9:19 AM, Switch74 said:

а выложить куда-то не могли? у меня получается ваш конечный вариант вот таким http://jsfiddle.net/6hxstj45/

Выложить полностью код страницы? Или что именно?

Я забыл указать, ширина всё страницы 925px

[Switch74]

ну хотя бы куска проблемного. Вы видите что получается по тем данным, что вы дали, они не похожи на ваш скрин, или чего-то не хватает или чего-то много

[FitTech]

http://rghost.ru/59916141
 

Полностью html,css и изображение

Edited December 23, 2014 by FitTech

[Switch74]

лучше бы на http://jsfiddle.net выложили

проблема состоит в том, что у вас два элемента inline выравниваются по базовой линии, сделайте для них выравнивание по top

а вообще верстка там ужасненькая, такое ощущение, что вот-вот все развалится

[FitTech]

  On 12/23/2014 at 10:11 AM, Switch74 said:

лучше бы на http://jsfiddle.net выложили

проблема состоит в том, что у вас два элемента inline выравниваются по базовой линии, сделайте для них выравнивание по top

а вообще верстка там ужасненькая, такое ощущение, что вот-вот все развалится

про vertical-align не подумал, спасибо.

В след.раз туда код выложу.

А в чем именно ужасная? Подтолкните куда смотреть

[Switch74]

посмотрите через инспектор, он подсветит блоки и вы увидите, что у вас текст наприер вылазит за размеры блока, где-то есть отступы которые стоило бы убрать или использовать другие теги

[FitTech]

  On 12/23/2014 at 4:50 PM, Switch74 said:

посмотрите через инспектор, он подсветит блоки и вы увидите, что у вас текст наприер вылазит за размеры блока, где-то есть отступы которые стоило бы убрать или использовать другие теги

Понял! Подскажите, правильно ли использовал span там где большие буквы MOBISHOP?

Или там нужно было другой тег? Спасибо!

Edited December 23, 2014 by FitTech

[Switch74]

вполне норм