Reputation: 33
I've been trying to get my form elements to align for ages and tried restarting multiple times, but it's just not working with me. This is what I'm trying to get:
This is what I get:
My main problem is probably the radio buttons, which I can't get text to the right of when they're floated right, and for some reason can't get to float left without floating everything left. I am really new to HTML, so I might just be missing something obvious?
.container {
margin-left: 300px;
margin-right: 600px;
margin-bottom: 200px;
line-height: 3;
display: inline-block;
}
.container input {
width: 700px;
float: right;
}
.container select {
width: 400px;
float: right;
}
<div class="container">
<form action="user data.php">
<input type="text" name="fname" value="First Name"> <br>
<input type="text" name="lname" value="Last Name"> <br>
<input type="text" name="email" value="e-mail Address"> <br>
<input type="text" name="cell" value="Cell Number"> <br>
<input type="text" name="id" value="ID/Passport Number"> <br>
<input type="text" name="dob" value="Date of Birth"> <br>
<label for="course">Course:</label>
<select name="course"></select> <br>
<label for="hlevel">Highest Education Level:</label>
<select name="hlevel"></select> <br>
<p>Identification Type:</p>
<input type="radio" name="idtype" id="passnum" style="width: 5px;" value="Passport Number">
<label for="passnum"> Passport Number </label> <br>
<input type="radio" name="idtype" id="idnum" value="ID Number">
<label for="idnum"> ID Number </label> <br>
<label for="gender">Gender:</label>
<label for="pgroup">Population Group:</label>
<select name="pgroup"></select> <br>
<input type="submit" name="submitbtn" value="Submit Info">
</form>
</div>
Upvotes: 0
Views: 190
Reputation: 1762
In HTML, add class to submit button
<input class="submit-btn" type="submit" name="submitbtn" value="Submit Info">
In CSS, add below
form {
max-width: 700px;
}
input {
max-width: 700px;
}
.submit-btn {
max-width: 80px;
}
Upvotes: 1