Float not working. Why?

Question

this is really annoying me, i've tried looking up a solution but to no avail. In the header of My Website, You can see the search bar is underneath the logo, I just want it on the far right of the header. It seems like such a simple fix but I can't work it out for the life of me.

Here's the 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>

Here's the CSS

#search { float:left;}

#logo { float:left; }


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


}

Solution 1

Change #search to

 #search { float:right;}

and as the above answer says give it a width

I also don't think there is any reason to wrap your form in <span> tags.

I just noticed you are also missing a ; after width: 100%, should read

 width:100%;

Solution 2

Because your form tag is a block level element. Make your form tag and your anchor tag both float left and it will line up fine.

Comments

[nutman]

thanks, it was the width ; that was the problem. i had tried almost every possible way to try and fix it except i hadn't noticed that. silly me! thanks for pointing it out.