I want to create a layout with a background image in a div, a signup form on the right side, and a div containing h1 tags on the left side.
Here is the HTML code:
<html>
<title> GoToMy PC </title>
<head> <link rel="stylesheet" type="text/css" href="blah.css" /> </head>
<body>
<section class="imageform">
<div>
<h1> Heading text goes here </h1>
<h2> Sub text goes here </h2>
</div>
<form class="signup_form">
<label class="holder-text"> Your Name </label><br/><input class="field_height" type="text" name="firstname" placeholder="First Name"> <input class="lastname" type="text" name="lastname" placeholder="Last Name"><br/>
<label class="holder-text">E-mail address</label><br/><input class="field_width_height" type="email" name="user_email"> <br/>
<label class="holder-text">Password</label><br/><input class="field_width_height" type="password" name="password" ><br/>
<label class="holder-text"> At least 8 characters with both letters and numbers </label><br/>
</form>
</section> <!--End of imageform section -->
Although the form appears on the page, it is not aligned to the right as intended. The div containing the h1 tags is positioned at the bottom of the page, and the background image only displays when the screen width is decreased significantly.
Any assistance in resolving these issues would be greatly appreciated.
JSfiddle link: http://jsfiddle.net/fwkqos0c/