Проблема с расположением элементов

[cheezy]

Добрый день!

 

Сейчас прохожу обучение нового курса, знаю HTML на 3 сейчас и всегда позиционировал элементы абы как, лишь бы добиться результата.

 

Хочу позиционировать шапку следующим образом.

 

вот CSS:

.header {	overflow: hidden;}.logo {	float: left;}.slogan {	float: left;}.head-contact {	float: right;}.search-head {	float: right;}

Вот что получается

 

http://hostingkartinok.com/show-image.php?id=455b6ab26ebab9679e8d304ed8105621'>

 

Помогите решить проблему.

И посоветуйте источник хороший, для того чтобы полностью разобраться в правильном позиционировании элементов.

[Galaxy]

телефоны + текст это все logo(float:left;), контакты + форму обвернуть в div которому надо задать float:right;

[cheezy]

К сожалению по некоторым причинам, должны быть 4 отдельных элемента.

[Galaxy]

http://jsfiddle.net/hb35ehn1/ схематически как то так

[garnir]

Можно выровнять три блока в один ряд при помощи display:inline-block; vertical-align:top; в последний включить телефоны и форму поиска. я бы так сделал.

[Z1gnet]

К сожалению по некоторым причинам, должны быть 4 отдельных элемента.

ну вообще надо бы обернуть в див, но если уж такие проблемы есть, то можно костыльнуть. дайте слогану нижний margin пикселей 10. правда это хреновое решение (если поменяется количество строк в .head-contact все развалится)

[SelenIT]

Имхо, достаточно дать форме поиска clear: right, чтобы она опустилась под контакты, а не цеплялась за их угол (демка на базе примера Galaxy).

[cheezy]

Имхо, достаточно дать форме поиска clear: right, чтобы она опустилась под контакты, а не цеплялась за их угол (демка на базе примера Galaxy).

Всё решил, когда случайно убрал float у img №2