CODEWITHSUNDEEP
htmlcsstextinputform-submit
Bartosz Olszewski
Bartosz Olszewski

Reputation: 5

Input boxes not lining up

I'm new to HTML and last time I've been editing my code I found that my input boxes don't align perfectly. I want them to be just in line on right. Here is the code:

input
{
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: solid 3px #66004C;
  background: #cdcdcd; 
}
<div style="float: left; position: relative; left: 50%;">
	<div style="float: left; position: relative; left: -50%;">	
		<form action="" method="post">
 			<input type="text" name="username" placeholder="Username">
 			<input type="password" name="password" placeholder="Password">
 			<input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
			<input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom: 	solid 5px #66004C;"/>  
		</form> 	
	</div>
</div>

Also I searched the web but found no right answer..

Thanks in advance.

Upvotes: 0

Views: 59

Answers (4)

Mudassar Saiyed
Mudassar Saiyed

Reputation: 1148

#main
    {
     align:right;
    }
input {
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border: 0;
  border-bottom: solid 3px #66004c;
  background: #cdcdcd; 
  box-sizing: border-box;
  align:right;
}



<div id="main" style="float:right; position: relative; ">
  <div style="float: right; position: relative; ">  
    <form action="" method="post">
      <input type="text" name="username" placeholder="Username">
      <input type="password" name="password" placeholder="Password">
      <input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
      <input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom:    solid 5px #66004C;"/>  
    </form>     
  </div>
</div>

Upvotes: 0

stanze
stanze

Reputation: 2480

Add this CSS3 box-sizing Property in your stylesheet.

* {
  box-sizing: border-box;
}

Upvotes: 0

Philip Dernovoy
Philip Dernovoy

Reputation: 1179

Just set box-sizing for inputs.

Learn more about CSS3 box-sizing Property

input {
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border: 0;
  border-bottom: solid 3px #66004c;
  background: #cdcdcd; 
  box-sizing: border-box;
}
<div style="float: left; position: relative; left: 50%;">
  <div style="float: left; position: relative; left: -50%;">	
    <form action="" method="post">
 	  <input type="text" name="username" placeholder="Username">
 	  <input type="password" name="password" placeholder="Password">
 	  <input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
	  <input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom: 	solid 5px #66004C;"/>  
	</form> 	
  </div>
</div>

Upvotes: 0

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

Padding adds extra width to any element. In your case an additional 50px (left + right)

The solution is simple and worth doing in every project:

* { Box-sizing: Border-box } 


input
{
	margin: 				auto;
    padding: 				25px;
    font: 					normal 15px Verdana, Tahoma, sans-serif;
    width: 					100%;
	border-left: 			0;
	border-right: 			0;
	border-top: 			0;
	border-bottom: 			solid 3px #66004C;
    background: 			#cdcdcd; 

}
* { box-sizing: border-box } 
<div style="float: left; position: relative; left: 50%;">
	<div style="float: left; position: relative; left: -50%;">	
		<form action="" method="post">
 			<input type="text" name="username" placeholder="Username">
 			<input type="password" name="password" placeholder="Password">
 			<input type="submit" value="Log In" style="background: #66004C; color: #efefef;"><br>
			<input type="submit" value="Don't have an account yet? Register!" onclick="window.location='/register.php';" style="border-bottom: 	solid 5px #66004C;"/>  
		</form> 	
	</div>
</div>

Upvotes: 1

Related Questions