Поплавок не работает.Зачем?

Question

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

Вот HTML

<div id="header">
<div id="logo">
<a href="http://www.otherwords.info/index.php"><img src="images/otherwordslogo.jpg" /></a>
</div>
<div id="search">
<span>
<form method="post" action="search.php?op=Search" id="form">

<input type="text" value="Search Phrase" onfocus="if(this.value == 'Search Phrase'){this.value = '';}" size="40" name="q">

<input type="submit" value="Search" name="submit">

</form>
</span>
</div>
</div>

Вот CSS

#search { float:left;}

#logo { float:left; }


div#header {
    vertical-align:top;
    width:100%
    clear: both;
    height: 150px;
    background-color: aqua;
    padding: 1px;


}

Answer 1

Измените #search на

 #search { float:right;}

и как сказано в ответе выше, дайте ему ширину

Я также не думаю, что есть какая-либо причина заключать вашу форму в теги <span>.

Я только что заметил, что вы тоже не хватает; после ширины: 100%, следует читать

 width:100%;

Answer 2

Просто поместите ваш #search div вправо и удалите span, нет смысла там быть.

Пример здесь .

Answer 3

Поскольку тэг формы является элементом уровня блока. Сделайте так, чтобы ваш тег формы и ваш тег привязки плавали влево, и он будет в порядке.