Making form inputs float to the right? - html

Question

How can I make the 2nd input form of each go all the way to the right.
I tried putting float: right, but it messed up the entire form.
Here's what I have right now:
HTML:
<form action="pdotest/test.php" method="post">
<div>
<div style="float: left;">
<label>First Name:</label><br/>
<input type="text" name="firstname" />
</div>
<div>
<label>Province:</label><br/>
<select name="Province">
<option value="volvo">Alberta</option>
<option value="saab">British Columbia</option>
<option value="mercedes">Manitoba</option>
<option value="audi">New Brunswick</option>
<option value="audi">Newfoundland and Labrador </option>
<option value="audi">Northwest Territories</option>
<option value="audi">Nova Scotia</option>
<option value="audi">Ontario</option>
<option value="audi">Prince Edward Island</option>
<option value="audi">Quebec</option>
<option value="audi">Saskatchewan</option>
<option value="audi">Yukon</option>
</select>
</div>
</div>
<div>
<div style="float: left;">
<label>Last Name:</label><br/>
<input type="text" name="lastname" />
</div>
<div>
<label>Postal Code:</label><br/>
<input type="text" name="postalcode" />
</div>
</div>
<div>
<div style="float: left;">
<label>Address Line 1:</label><br/>
<input type="text" name="addressline1" />
</div>
<div>
<label>Phone Number (day):</label><br/>
<input type="text" name="phonenumber" />
</div>
</div>
<div>
<div style="float: left;">
<label>Address Line 2:</label><br/>
<input type="text" name="addressline2" />
</div>
<div>
<label>Postal Code:</label><br/>
<input type="text" name="postalcode" />
</div>
</div>
</form>
CSS:
input[type=text], select {
width: 300px;
padding: 8px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
https://jsfiddle.net/y13ac506/1/
I don't really want to use margin/padding.

Answer 1

Use float:right and then add flowing code in end:
<div style="clear:both;"></div>
</form>
Note: This is easiest not best way according to your code.

Answer 2

Use two different divs with float:left & width:50% style. The two will align side by side.Then put the input as per your requirment
.container{
width:50%;
margin:0;
padding:0;
float:left;
}
<div class="container">
<div>
<label>First Name:</label><br>
<input type="text" name="firstname"/>
</div><br>
<div>
<label>Last Name:</label><br>
<input type="text" name="lastname"/>
</div>
</div>
<div class="container">
<div>
<label>Province:</label><br>
<select name="Province">
<option value="volvo">Alberta</option>
<option value="saab">British Columbia</option>
<option value="mercedes">Manitoba</option>
<option value="audi">New Brunswick</option>
<option value="audi">Newfoundland and Labrador </option>
<option value="audi">Northwest Territories</option>
<option value="audi">Nova Scotia</option>
<option value="audi">Ontario</option>
<option value="audi">Prince Edward Island</option>
<option value="audi">Quebec</option>
<option value="audi">Saskatchewan</option>
<option value="audi">Yukon</option>
</select>
</div><br>
<div>
<label>Postal Code:</label><br>
<input type="text" name="postalcode"/>
</div>
</div>

Answer 3

Try decreasing the value of width
input[type=text], select {
width: 250px;
}
/* manage it with margin for appropriate spacing around input fields..