CODEWITHSUNDEEP
css
Dwev
Dwev

Reputation: 163

Aligning form elements on right side - text fields and submit button

I have tried many things to try to get the right side of these text fields to align with the submit button, but to no avail.

The button seems to be okay (correct spacing between the button and the frameset border, but the text fields go over.

What could be the problem?

Bad alignment on right side

#loginform {
  width: 580px;
  background-color: rgb(200,200,200);
  opacity: 0.8;
  font-size: 1.5em;
  border: #00a0d0 5px solid;
  padding: 30px;
}

.logintextfield {
  font-size: 1em;
  width: 100%;
}

.loginbutton {
font-size: 1em;
height: 2em;
background-color: #689C41;
width: 100%;
border-top: lightgreen;
border-left: lightgreen;
border-right: darkgreen;
border-bottom: darkgreen;
border-style: solid;
border-width: 2px;
}

Upvotes: 0

Views: 107

Answers (1)

Gerard
Gerard

Reputation: 15786

Include box-sizing:border-box for all elements in your CSS to specify they should have padding and border included in the element's total width and height

* {
box-sizing: border-box;
}

#loginform {
  width: 580px;
  background-color: rgb(200,200,200);
  opacity: 0.8;
  font-size: 1.5em;
  border: #00a0d0 5px solid;
  padding: 30px;
}

.logintextfield {
  font-size: 1em;
  width: 100%;
}

.loginbutton {
font-size: 1em;
height: 2em;
background-color: #689C41;
width: 100%;
border-top: lightgreen;
border-left: lightgreen;
border-right: darkgreen;
border-bottom: darkgreen;
border-style: solid;
border-width: 2px;
}
<form id="loginform">
  <fieldset>
    <legend>SIGN IN</legend>
    <input type="text" class="logintextfield"><br>
    <input type="text" class="logintextfield"><br>
    <input type="submit" class="loginbutton" value="submit">
  </fieldset>
</form>

Upvotes: 1

Related Questions