CSS. Проблема с блочной версткой.

[m0rt]

Подскажите пожалуйста. Имеется такой элемент сайта:

Это верхнее меню с приветствием и поиском. Само меню позицианируется по центру экрана, с нулевым отступом сверху, и на скрине его 100% масштаб.

Каркас имеет вид:

<div id="top-panel">

	<div id="hello">
		<p id="welcome">Добро пожаловать, Гость</p>
	</div>

	<div id="search">
		<form action="#search" method="post" id="search-form">
		<input type="text" name="query" value="Search" />
		<input type="submit" name="submit" value="Search!" />
		</form>
	</div>
    
</div>

Вопрос в следующем. Как правильно спозицианировать блок поиска, чтоб выглядело как на скрине?

[[MoNAMur]]

в css

#hello { float:left; }
#search { float:right; }

<p id="welcome"></p> - лишнее на мой взгляд, хотя как говорят... на вкус и цвет... )))

[dekameron]

Сообщение от [MoNAMur]

в css
<p id="welcome"></p> - лишнее на мой взгляд, хотя как говорят... на вкус и цвет... )))

Точно лишнее) если не задать ширину для блоков с обтеканием (float) то <p> растянет первый блок на всю возможную ширину, в результате поиск сьедет на строчку ниже.

Так же было бы неплохо подписать для этих блоков фиксированую ширину, согласовано конечно с минимальной шириной сайта

[m0rt]

Спасибо, разобрался.

Еще такой вопрос, корректно ли решение данного вопроса с помощью абсолютного позиционирования?

div#search {
position:absolute;
top:10px;
margin-left:500px;
}

[dekameron]

Да, только для #search корректней было бы сделать

position:absolute;
top:10px;
right:10px;

т.к. он справа страницы находится.
+ если сузить окно до размеров например в 200 пикселов, даже при заданой минимальной ширине body этот блок будет именно справа от края экрана, а не от края body

[m0rt]

То есть если я весь сайт построю с использованием абсолютного позиционирования это будет считаться корректным?

Вот пример m0rtim3r.narod.ru , тут все построено с использованием float кроме кнопок основного меню. Разницы я не вижу, но т.к. это мой первый сайт я не знаю скрываются ли какие то проблемы в будущем за этими решениями из за отсутствия опыта.

[dekameron]

Шапку, которая не меняется в зависимости от контента сайта можно смело делать с абсолютным позиционированием, а вот тело (если предусмотрена разная длинна его содержимого) все же лучше делать с float

[dekameron]

Шапку, которая не меняется в зависимости от контента сайта можно смело делать с абсолютным позиционированием, а вот тело (если предусмотрена разная длинна его содержимого) все же лучше делать с float

[Prox_]

div#top-panel div#hello { float:left; padding:5px;}
div#top-panel div#search { float:right;padding:5px; }

[m0rt]

Сообщение от Prox_

div#top-panel div#hello { float:left; padding:5px;}
div#top-panel div#search { float:right;padding:5px; }

Спасибо, уже разобрался.