Как расположить форму в правом углу хэдера?

Question

[Antoshkaplehanov]

Подскажите люди добрые, как мне форму расположить в правом углу хэдера и выровнять кнопку поиска с полем для ввода текста?
Заранее спасибо!
P.S. пробывал float прописывать, форма только смещается вправо, не залазит, также выпадает из хэдера.
Ссылка на HTML,CSS код : https://jsfiddle.net/0bmjzmyy/

Comments

[Максим Тимофеев]

код будет или погадаем по кофейной гуще?

Answer 1

[Faber Estello]

1. h1 и p обернуть в div обязательно и задатьfloat: left, тогда и для формы сработает float: right

2.

<header class="top_header">
			<div class="wrap">
			  <div class="header__left">
			  <h1><span>Н</span>азвание сайта</h1>
              <p>Подзаголовок сайта или какой-нибудь слоган.</p>
              </div>
              <form class="search__form">
               <input type="search" name="q" placeholder="Поиск..."> 
               <input type="submit" value=""></p>
              </form>
			</div>
		</header>

Для выравнивания, внутри header помещаем

.wrap {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

3. На странице может использоваться всего один h1, не более!!! (Кинулось в глаза)

jsbin.com

Comments

[Faber Estello]

Antoshkaplehanov: А как выровнять, уточните пожалуйста? У вас верстка такая интересная)

[Antoshkaplehanov]

Спасибо, помогло!

[Antoshkaplehanov]

А почему h1 можно только один раз использовать?

[Faber Estello]

Antoshkaplehanov: Первое правило верстки! =) Запомните, h1 может использоваться на странице только один раз!

[Antoshkaplehanov]

Sen Selesss: а если у меня заголовков на сайте нужно over+100500, то как быть тогда?)