HTML: добавление тегов <form> во входное текстовое поле помещает текстовое поле под логотип сайта

Я создаю социальную сеть, и у меня возникают проблемы с навигационной панелью и поисковым полем. У меня есть простой код для текстового поля

<div style="float:left">
    <a href="index.php"><div class="website_icon"></div></a>
    <input type="text" name="q" class="search" placeholder="Search..." />
</div><

Когда у меня есть код, подобный этому, он выглядит так: http://prntscr.com/39v9g0

Теперь

<div style="float:left">
    <a href="index.php"><div class="website_icon"></div></a>
    <form action="" method="GET">
      <input type="text" name="q" class="search" placeholder="Search..." />
    </form>
</div>

Когда я добавляю теги <form></form> в текстовое поле, это выглядит так: http://prntscr.com/39v9kl

Вот мой css для текстового поля и для сайта_icon

/*Search box*/
.search {
    height: 30px;
    width: 250px;
    margin-top: 10px;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    padding-left: 6px;
    padding-right: 6px;
    border: 0px;
}
/*Search box hover*/
.search:hover {
    outline: none;
    padding-left: 6px;
    padding-right: 6px;
}
/*Search box focus*/
.search:focus {
    outline: none;
    padding-left: 6px;
    padding-right: 6px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 300px;
}
/*Website icon*/
.website_icon {
    width: 30px;
    height: 30px;
    background: url('../img/desktop-icon.png');
    display: inline-block;
    margin-top: 10px;
    margin-right: 7px;
    float: left;
}

Кто-нибудь знает, почему текстовое поле попадает под логотип при добавлении тегов формы? Заранее спасибо!