Why does form affect div spacing?

Question

I am not great with html/css. But why does the first html have Home and form textbox in the same line (as i want) and the second has the textbox (and other boxes and links) on a separate line?

<div class="login">
<form action="/login?ret=%2f" method="post"><div>
<a href="/" title="Home">Home</a> 
<input type="text" name="username"/>

---

<div class="login">
<a href="/" title="Home">Home</a> 
<form action="/login?ret=%2f" method="post"><div>
<input type="text" name="username"/>

Answer 1

I think it has to do with the div tag at the end of this line:

<form action="/login?ret=%2f" method="post"><div>

Since div is a block element, the input box inside the div will appear on a second line, whereas in the first example, both "Home" and the input box are in the same div, and hence on the same line.

Answer 2

Your html is a little mixed up. The 'login' div ends after the opening tag of the form - it needs to wrap the entire form.

<div class="login"> 
  <a href="/" title="Home">Home</a>  
  <form action="/login?ret=%2f" method="post">
    <input type="text" name="username"/>
  </form>
<div> 

Answer 3

In addition to what Ray suggested:

<div class="login"> 
  <a href="/" title="Home">Home</a>  
  <form action="/login?ret=%2f" method="post">
    <input type="text" name="username"/>
  </form>
</div> 

you also need to add the following styling: form { display: inline; }.