Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form:
<div id="form1">
<form action="demo_form.asp" autocomplete="on" >
Departure City
<br><select name="mydropdown" id="departurecity">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select><br>
Arrival Time
<br><select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
Departure Time
<br><select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
Departure Date
<br><select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
Adult
<br><select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
Child
<br><select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
Senior
<br><select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
<input type="submit">
</form>
</div>
CSS:
#form1{
border: 1px solid white;
margin: 100px;
width:50%;
position: absolute;
right:0;
bottom:0;
}
The form is currently positioned in the center of the page, but I want it to be at the bottom right corner. I've tried various methods without success. Can anyone provide guidance on how to achieve this?