Верстка шапки — что я не так делаю?

Question

[lere]

CSS

.header {
	background: url(../img/header.jpg) no-repeat top fixed;
	background-size: auto !100%;
	padding: 20px 15px 0px 0px;
    overflow: hidden;
}
.logo {
	
	display: inline-block;
    margin-left: 50px; 
}
header form{
  float: right;
}

HTML

<div class="header">
		     
			 
			 <div class="logo">
             
             <img src="img/logo.png" alt="ll"></img>
             <h1>Заголовок</h1>			 
		     </div>
		
            <form class="header form">
              <input type="sdds">
              <input type="dsds">

            </form>
         </div>

Получается вот так:

Нужно так:

Answer 1

[Максим Е]

1. У вас элемент с float располагается после обтекаемого.
2. Задайте ширину для формы

А это просто шедевр: type="sdds"
В CSS не забывать точки, обозначающие класс:

.header.form{
  float: right;
}

Comments

[Андрей Федоров]

На type-то как раз наплевать, если браузер не поддерживает конкретный type он ставит туда type="text". Т.ч. теоретически проблем нет. )

[Максим Е]

Андрей Федоров: так лучше вообще не писать ничего тогда. все равно text присвоит :)

[Михаил Чирский]

Андрей Федоров: Браузер да. а W3c вам выдаст ошибку валидации, при проверке вашего сайта, что такой тип не сущестувует, с вашей логикой, можно вообще любой тип и тег придумывать, все равно же браузер схавает, а потом вопросы на тостере, не работает на iphone, android, ну браузер же хавает, жаль не у всех.

[Андрей Федоров]

Михаил Чирский: Думаю на данном этапе невалидный код меньшая из проблем у ТС. ))

Answer 2

[Кирилл]

возьми 100% ширина и дели ее, можешь использовать тег table

Answer 3

[Иван Богданович]

Что-то с селектором "header form" напутано:

header form{
  float: right;
} ...

и
<form class="header form">...
Возможно надо в css добавить "." перед header и убрать совсем class="header form"

Answer 4

[mr_dev1l]

НЕ
<form class="header form">,
А
<form class="header-form">

и не

header form{
  float: right;
}

а

.header-form{
  float: right;
display:inline-block;
}
.logo {
  
  display: inline-block;
    margin-left: 50px; 
float:left;
}

Answer 5

[lere]

Что получилось:

<div class="header">
		     
			 
			 <div class="logo">
             
             <img src="img/logo.png" alt="ll"></img>
             <h1>Заголовок</h1>			 
		     </div>
		
            <form class="header-form">
              <input type="">
              <input type="">

            </form>
         </div>

.header {
	background: url(../img/header.jpg) no-repeat top fixed;
	background-size: auto !100%;
	padding: 100px 15px 0px 0px;
    overflow: hidden;
}


.header-form{
  float: right;
display:inline-block;
}
.logo {
  
  display: inline-block;
    margin-left: 50px; 
float:left;
}

Осталось логотип в центр поставить.