electroshock777
electroshock777

Reputation: 33

Struggling to align form elements

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:

Ideal form

This is what I get:

Bad form

JSFiddle demo

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

Answers (1)

Jaspreet Singh
Jaspreet Singh

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

Related Questions