title: div with hero image, html form and text
body: <p>I am trying to have a div with a back ground image, a signup form at the right end and a div with h1 tags on the left. </p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;title&gt; GoToMy PC &lt;/title&gt;
  &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="blah.css" /&gt; &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;section class="imageform"&gt;
  
  &lt;div&gt;
  &lt;h1&gt; Heading text goes here &lt;/h1&gt;
  &lt;h2&gt; Sub text goes here &lt;/h2&gt; 
  &lt;/div&gt;
  
   &lt;form class="signup_form"&gt;
  
  
  &lt;label class="holder-text"&gt; Your Name &lt;/label&gt;&lt;br/&gt;&lt;input class="field_height" type="text"   name="firstname" placeholder="First Name"&gt;  &lt;input class="lastname" type="text" name="lastname" placeholder="Last Name"&gt;&lt;br/&gt;
  &lt;label class="holder-text"&gt;E-mail address&lt;/label&gt;&lt;br/&gt;&lt;input class="field_width_height" type="email" name="user_email"&gt; &lt;br/&gt;
  &lt;label class="holder-text"&gt;Password&lt;/label&gt;&lt;br/&gt;&lt;input class="field_width_height" type="password" name="password" &gt;&lt;br/&gt;
  &lt;label class="holder-text"&gt; At least 8 characters with both letters and numbers &lt;/label&gt;&lt;br/&gt;
  
  
   &lt;/form&gt;
  
  &lt;/section&gt;  &lt;!--End of imageform section --&gt;
  </code></pre>
  
  <p>
        </p>
  
  <p>The form show up in the page but its not floating right, the div with h1 tags is at the bottom of the page and back ground image shows up only when screen width is made too small.</p>
  
  <p>Any help in fixing this is much appreciated.</p>
  
  <p>JSfiddle link: <a href="http://jsfiddle.net/fwkqos0c/" rel="nofollow">http://jsfiddle.net/fwkqos0c/</a></p>