CODEWITHSUNDEEP
csshtmlformsxhtml
mXX
mXX

Reputation: 3625

Aligning submit button and textfields with css

I have a form where I gave the textfields a padding so it will be a bit bigger and nicer. Underneath the form I have a submit button. The button and the textfields have a width of 100%, but the problem is, is that the button isn't fully 100% by that it isn't equally even in the width with the textfields. What am I doing wrong? Can't seem to "find" the issue

I have put it here http://jsfiddle.net/zrhB6/3/

The Css

input[type=text],input[type=password]{
  display: block;
  height: 3em;  
  width: 100%;

}

.btn {
  background-color:#c1d82f;
  border:3px solid #97a34b;
  display:inline-block;
  color:#26328c;
  font-family:Verdana;
  font-size:20px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  cursor: pointer;
  width: 100%;
}

HTML

<div class="grid-container">    
    <div class="grid-50 login">

        <h3>Login</h3>
        <form class="grid-100">
            <input type="text" name="loginEmail" placeholder="Email"/>             
            <input type="password" name="loginPassword" placeholder="pass"/>
            <input type="submit" name="loginSubmit" class="btn"/>
    </div>



    <div class="grid-50 login">
        <h3>Register</h3>

        <form">
            <input type="text" name="registerName" placeholder="Name"/>
            <input type="text" name="registerEmail" placeholder="Email"/>
            <input type="password" name="registerPassword" placeholder="pass"/>
            <input type="submit" name="registerSubmit" class="btn"/>    
   </div>

</div>

I'm using unSemantic grid, but that shouldn't be a issue I think

Upvotes: 0

Views: 1025

Answers (1)

meobyte
meobyte

Reputation: 1320

To both CSS selectors, add: 

box-sizing:border-box;

The reason is the default box sizing doesn't include padding and margins in the width, so you're getting 100% + padding + border + margin for the total width.

Upvotes: 2

Related Questions