HTML 5 <form> being weird
<p>So i'm currently building a set of 3 buttons via forms, and having a weird issue i've never seen before with the following code:</p>

<pre><code>&lt;div class='logout'&gt;
  &lt;form action='action.php' method='post'&gt;
    &lt;input type='submit' value='H'&gt;
    &lt;input type='text' name='mode' value='0' hidden&gt;
  &lt;/form&gt;
&lt;/div&gt;
&lt;div class='Mini'&gt;
  &lt;form action='action.php' method='post'&gt;
    &lt;input type='submit' value='M'&gt;
    &lt;input type='text' name='mode' value='MINI' hidden&gt;
  &lt;/form&gt;
&lt;/div&gt;
&lt;div class='Close'&gt;
   &lt;form action='action.php' method='post'&gt;
     &lt;input type='submit' value='C'&gt;
     &lt;input type='text' name='mode' value='DISPLAY' hidden&gt;
  &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>in its current state none of the forms are shown, but when the > is dropped from the close form tags they become fully functional</p>

<p>CSS is as follows</p>

<pre><code>.logout{
    position:Absolute;
    left:90%;
    top:0%;
}
.Mini{
    position:Absolute;
    left:87%;
    top:0%;
    z-index: 1;
}
.Close{
    position:Absolute;
    left:-130%;
    top:0%;
    z-index: 1;
}
</code></pre>