I have a few textboxes set to width: 100% inside a <div> with the width of 350px, they go outside of the div on the right side, and I don't understand, why?
See this fiddle
Also, code here (same as fiddle):
<body>
<div class="centerthis">
<form method="post" action="~/AJAXcalls/InsWrkOAJAX.cshtml">
<div class="insertWorkoutFormHolder">
<label class="radioLabel" for="typ4">Primary</label>
<input type="radio" name="Type" id="typ4" value="4" class="radioSelect"><br />
<label class="radioLabel" for="typ5">Secondary</label>
<input type="radio" name="Type" id="typ5" value="5" class="radioSelect" /><br />
<label class="radioLabel" for="typ6">Assistance</label>
<input type="radio" name="Type" id="typ6" value="6" class="radioSelect" /><br />
<br>
<div class="hideThis">
<label class="radioLabel" for="hej1">Squat</label>
<input class="radioSelect" type="radio" name="Exercise" id="hej1" value="1" />
</div>
<br />
<div class="hideThis">
<label class="radioLabel" for="hej2">Benchpress</label>
<input class="radioSelect" type="radio" name="Exercise" id="hej2" value="2" />
</div>
<br />
<div class="hideThis">
<label class="radioLabel" for="hej3">Deadlift</label>
<input class="radioSelect" type="radio" name="Exercise" id="hej3" value="3" />
</div>
<br />
<div>
<input id="dailyPR" placeholder="Daily Max..." name="dailyPR" type="text" size="50" value="" class="hideThis insertWorkoutBoxes" />
</div>
<!-- Textbox for amount of weight. -->
<div>
<input placeholder="Weight..." name="Kg" type="text" size="50" value="" class="insertWorkoutBoxes" />
</div>
<!-- Textbox for number of sets. -->
<div>
<input placeholder="Number of sets..." name="Sett" type="number" size="50" value="" class="insertWorkoutBoxes" />
</div>
<!-- Textbox for number of reps. -->
<div>
<input placeholder="Number of reps..." name="Rep" type="number" size="50" value="" class="insertWorkoutBoxes" />
</div>
<!-- Textbox for date of workout. -->
<input placeholder="" type="text" spellcheck="false" autocomplete="off"
class="datepicker workoutVariSelect capitalFirst" name="Date" value="" readonly="readonly" />
<div>
<!-- Form submit button. -->
<br /><a class="AddBtn">Add</a>
</div>
</div>
</form>
</div>
</body>
CSS:
.AddBtn {
padding: 10px 70px 10px 70px;
background-color: white;
cursor:pointer;
}
.centerthis {
text-align:center;
}
.radioSelect {
width: 20px;
float: right;
margin: 0px 115px 0px 0px;
}
.radioLabel {
float:left;
margin-left: 80px;
}
.insertWorkoutFormHolder {
width: 350px;
margin:auto;
}
.workoutVariSelect {
width: 100%;
padding: 11px;
border: 1px solid white;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
font-family: Verdana;
font-weight: 500;
background: #fff center right 10px no-repeat url('Images/pil.jpg');
background-size: 12px 8px;
cursor: pointer;
user-select: none;
margin: 0;
vertical-align: middle;
}
.insertWorkoutBoxes {
border: 1px solid white;
width: 100%;
margin: 5px 0px;
padding: 11px;
}
There are some default paddings and borders set on most of the form element such as <input type="text">. You can apply box-sizing: border-box along with the width: 100%, so that padding and border will be part of total width.
div {
width: 200px;
outline: 1px solid aqua;
}
input {
width: 100%;
}
.border-box {
box-sizing: border-box;
}
<div>
<input type="text">
</div>
<div>
<input type="text" class="border-box">
</div>
The reason is the padding in the input field which is not considered in width 100%. You should use box-sizing: border-box;
Related
So I have created a form with different type of elements (including radio, checkbox, text input etc.) and I cannot figure out how to make the whole form look neat. Ideally I want all labels aligned on the left side, except labels for radio buttons which should be aligned with the input fields.
My pen:
https://codepen.io/andreas-soteriou/pen/NWwEywR?editors=1100
I coloured the labels and inputs, for me to visualise as I am fairly new to this!
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type"submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
header, body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,input, select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color:red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color:blue;
margin-top: 2px;
}
header,
body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,
input,
select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color: red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color: blue;
margin-top: 2px;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
Here's a simple starting point using CSS Grid
We are going to use two different grid layouts using the fieldset element and our grid container.
For simple Label | Input pairs the grid's first column will be the label taking 25% of the available space with the input occupying the rest.
For the radio button or check box groups, we will add a class to the fieldset then use three columns with 25% for the group label, auto for the input width, with the input label occupying the rest
fieldset {
border: none;
/*Set up base grid*/
display: grid;
/*Set Columns, first column is 25% the second takes up the rest*/
grid-template-columns: 25% 1fr;
row-gap: 0.5em;
}
/*Label styling*/
fieldset label {
text-align: right;
padding-right: 0.25em;
}
/*Additional set up for button group*/
fieldset.button-group {
/*For out button group rows we want the first col 25% ,
control minimum space, then next col take the rest*/
grid-template-columns: 25% auto 1fr;
}
/*Addditional stylings for the button/checkbox labels*/
fieldset.button-group label:not(:first-of-type) {
text-align: left;
}
/*Bump the buttons & check boxes to second column*/
fieldset.button-group input {
grid-column-start: 2;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<fieldset>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
</fieldset>
<!--RADIO--->
<fieldset class="button-group">
<label>Size of print:</label>
<input id="print_size_199" type="radio" name="print_size" value="10x10">
<label for="print_size_199">10x10 199:-</label>
<input id="print_size_299" type="radio" name="print_size" value="20x20">
<label for="print_size_299">20x20 299:-</label>
<input id="print_size_399" type="radio" name="print_size" value="40x40">
<label for="print_size_399">40x40 399:-</label>
<input id="print_size_599" type="radio" name="print_size" value="80x80">
<label for="print_size_599">80x80 599:-</label>
</fieldset>
<!--CHECKBOX--->
<fieldset class="button-group">
<label>Additional features:</label>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</fieldset>
<!--TEXTAREA--->
<fieldset>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</fieldset>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.
form {
margin: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
add text-align: center; to the form tag
form {
margin: auto;
text-align: center;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname">
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com">
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com">
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.
HTML
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<div class="form-center">
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<div class="form-center">
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</div>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
CSS
form {
margin:auto;
}
div.form-center {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
form {
/*margin: auto; Not required as long as you didn't specify the width of the form*/
text-align: center;
}
fieldset {
/*centering the fieldset horizontally*/
margin: 1em auto;
...
}
You may want to use Flexbox.
On the fieldset selector add the following 3 lines of code:
display: flex;
flex-direction: column;
align-items: center;
Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.
Your example would then remain the same, only for the fieldset selector you have the following css properties:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em auto;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.
I have a simple login/signup page that im making. Both the login and signup parts of the site have issues in that the text mentioning what to write in the textboxes are not aligned with one another. I have tried to change the margins back and forth and no matter how I change it I still have the same problem.
As you can see the Password in the login parn and the City and Email part dont stick to the left as it should. Is there any good way of solving this issue? And also is there any "clean" way of pairing the text with the textbox so that they always align? Below you will find the code I use for this part of the site.
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
As usual, what is a pain to do with classic CSS (float, clear etc) is a breeze with Flexbox :
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: #7fffd4;
padding: 5px;
}
#Sign_Up {
text-align: center;
background-color: #a52a2a;
margin-top: 10px;
padding: 5px;
}
form div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
border: #00f dashed 1px;
margin-bottom: 2px;
}
form div input {
width: 120px;
}
form div select {
width: 124px;
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<br><input type="submit" value="Submit">
</form>
</div>
</div>
You can us tabular forms, they are easy to manage.
form{
background-color:red
}
H1{
text-align:center
}
<!DOCTYPE html>
<html>
<body>
<H1>Hello</H1>
<form>
<table style="width:100%">
<tr>
<td>Email</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="firstname"></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
clear: left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
Addition: I made the form containers 20px wider and therefore the left container 20px narrower to avoid the problem described for Chrome in the comments.
Let's do some cleanup and simplification here.
First off we'll get rid of all those <br> tags. Don't need 'em.
Next we're going to stop with the floats. Float is great for what it's intended for, which is letting text wrap around a floated element. Float is not so great for what it's often used for, which is as a bad replacement for inline-block -- bad because you have to set explicit heights, worry about clears, etc.
#Login_and_Sign_Up {
width: 250px;
margin-left: 10px;
}
#Login {
background-color: aquamarine;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
}
label {
width: 80px; /* adjust to taste */
display:inline-block
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="#">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<input type="submit" value="Submit">
</form>
</div>
</div>
Further improvements that could be made:
For accessibility you should be associating your <label>s with their form elements. Do this either by using the for attribute on the label, or by nesting the form fields inside the label.
Using the label as the wrapper would have the additional advantage of allowing you to omit the wrapper <div>s, by setting label to display:block.
Use CSS Flexbox
I have done it for the login form, you can repeat the same for sign-up as well.
Please wrap your 'label and input select in <p> tags. This will help you eliminate <br/> tags.
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 170px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
.flex-form p{
display:flex;
}
input {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
select {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
label {
flex: 1;
margin: 5px 0 0 0;
float:left;
text-align:left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php" class="flex-form">
<p>
<label>Email</label>
<input type="text" name="email">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
My example looks at utilizing bootstrap .form-group and adding a min-width to the label. Though in hindsight, after reading the flexbox answer - that one is probably easiest for you. I've spent a little time working on this answer so I'll post it anyway.
I also stipped out a lot of unnecessary tags and assigned labels to their elements. There was a lot of br and div which didn't need to be there using this method.
#Login_and_Sign_Up {
height: inherit;
margin-left: 10px;
/* float: right; */
}
#Login {
background-color: aquamarine;
overflow: hidden;
width: 300px;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
width: 300px;
overflow: hidden;
}
label {
min-width: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="firstname">First name</label>
<input type="text" name="fname" id="firstname">
</div>
<div class="form-group">
<label for="familyname">Family name</label>
<input type="text" name="lname" id="familyname">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" name="city" id="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" name="country" id="country">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="repeat">Repeat PSW</label>
<input type="password" name="passwordrepeat" id="repeat">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
I am trying to get my form to center on desktop. It's currently to the left side.
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
The picture below shows the issue and I'll add a snippet and a fiddle to help. Thanks in advance.
Jsfiddle: https://jsfiddle.net/r87h2L6n/
/*********FORMS CSS*************/
form {
display: block;
margin-left: auto;
margin-right: auto;
}
form.contact label {
display: block;
}
span {
display: block;
border: none;
color: white;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
fieldset {
width: 45%;
float: left;
border: none;
}
input.checks {
width: auto;
}
.left {
width: 45%;
float: left;
}
.right {
width: 45%;
float: right;
}
input {
border: none;
border-bottom: 2px solid #959595;
width: 300px;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
}
.bottom {
border: none;
margin: 3px;
color: #6C6A6A;
padding-top: 10px;
padding-bottom: 10px;
width: 300px;
}
.fa {
margin-right: 10px;
}
legend {
color: white;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
.button:hover {
background-color: #670809
}
.button:active {
background-color: #670809;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<section class="clearfix" id="fourthpara">
<div class="imgbox5">
<img id="pic5" class="adjustable float move" src="http://weknowyourdreams.com/images/kitten/kitten-08.jpg" alt="example web page">
</div>
<h2>Student Review 3</h2>
<p class="side">
“This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured” -Papa Smurf
</p>
</section>
</div>
</section>
<div class="center clearfix">
<h1 id="fourth">Contact</h1>
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset>
<legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span>
<input name="first_name" type="text" value="" placeholder="First Name" required/>
</label>
<label><span>
</span>
<input name="last_name" type="text" value="" placeholder="Last Name" required/>
</label>
<label><span> </span>
<input name="date_of_birth" type="date" value="" placeholder="Date of Birth" required/>
</label>
<label><span>
</span>
<input type="number" name="quantity" min="1" max="6" placeholder="number of years until next degree">
</label>
<label><span></span>
<input name="level_of_education" type="hidden" value="" placeholder="level of education" required/>
</label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>
</fieldset>
<fieldset>
<legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information
<hr class="style2">
</legend>
<label><span>
</span>
<input class="ghost-input" name="email" value="" type="email" placeholder="youremail#email.com" autocomplete="off" />
</label>
<label><span></span>
<input name="phonenumber" value="" type="tel" placeholder="763-858-9564" />
</label>
<label><span></span>
<input name="website" value="" type="url" placeholder="https://yourwebsite.com" />
</label>
</fieldset>
</section>
<section class="clearfix column">
<fieldset>
<legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests
<hr class="style2">
</legend>
<section class="clearfix column left">
<label class="bottom span"><span><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>
<label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>
<label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span>
</label>
</section>
<section class="clearfix column left">
<label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>
<label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span>
</label>
<label class="bottom"><span><input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>
</fieldset>
<fieldset>
<legend><i class="fa fa-volume-control-phone" aria-hidden="true">
</i>
Follow Up
<hr class="style2 toosmall">
</legend>
<section class="clearfix column left">
<legend class="smaller">You can contact me by:</legend>
<br>
<div class="squish">
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span>
</label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text</span>
</label>
<br>
</div>
</section>
<section class="clearfix column left">
<legend class="smaller">I'm interested in:</legend>
<br>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span>
</label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span>
</label>
</section>
</fieldset>
</section>
<input class="button" name="submit_to_programmer" type="submit" value="Submit" />
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>
To add to Michael_B`s answer your form is set to take up the full width of the page as its a block element by default and you have set it as well. Margin auto only works for elements that are block or inline-block elements and they width of either must be set to a specified value for it to work.
To address your problem now, looking at your source code, you can get the result you expect by removing the float set on your fieldset element in your CSS and setting Margin to auto in that element. I am not sure what the purpose of the float in that CSS rule but you cannot center something that you have set to float. Hope this helps
The reason it's not centering is that your form element is a block level container and, therefore, it's occupying 100% width of the page. As a result, there no space left for centering.
As you wrote:
I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.
Well, if you give an element display: block it consumes all available horizontal space. Hence, margin-left: auto and margin-right: auto have no effect.
Try defining a width for the form (e.g. width: 30em), removing float rules and/or giving the form text-align: center, which centers the child elements.
It's not your form that is the issue here, it is your fieldset...again. Give this a whirl.
fieldset {
width: 45%;
margin: 0 auto;
/* float: left; -- DELETE float: left if you want this centered */
border: none;
}
UPDATE:
If you also want that submit button to be centered, here is the css for that.
.button {
margin: 0 auto; /* ADDED THIS */
display: block; /* Took inline-block out, just use block */
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
LIVE DEMO
I have a simple form with two columns and a field that consists of three inputs (see attached image)
The two columns are floated right.
I need to add a dash between the fields in "Adószám". I tried it with :before pseudo class but it didn't display anything. If I just add it to the HTML markup, the fields are wrapped to the next line.
Here is my HTML:
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" />
<input type="text" id="taxno2" name="taxno2" />
<input type="text" id="taxno3" name="taxno3" />
</label>
And my CSS:
#column1 {
margin-right: 50px;
display: inline-block;
width: 270px;
float: left;
}
#column2 {
display: inline-block;
width: 270px;
float: left;
}
label {
font-weight: bold;
/*display: inline-block;*/
}
input {
width: 255px;
/*display: inline-block;*/
height: 28px;
border: 1px solid #c3c6d1;
background-color: #eaecf2;
margin: 5px 0 5px 0;
font-size: 15px;
padding: 5px;
}
#taxno1 {
width: 82px;
}
#taxno2, #taxno3 {
width: 46px;
margin-left: 23px;
}
please review this code
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" /> -
<input type="text" id="taxno2" name="taxno2" /> -
<input type="text" id="taxno3" name="taxno3" />
</label>
#taxno2, #taxno3 {
width: 46px;
margin-left: 10px;
}
Demo here http://jsfiddle.net/z9b5S/
you have to wrap the input inside a span and then giving a class to span element it will work.
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<span class="add"><input type="text" id="taxno1" name="taxno1" /></span>
<span class="add"><input type="text" id="taxno2" name="taxno2" /></span>
<span class="add"><input type="text" id="taxno3" name="taxno3" /></span>
</label>
</div>
And add this class in your CSS file.
.add:after
{
content: "/";
}
.add:last-child:after{
content: " ";
}
A working Demo link is here.. http://jsbin.com/qeduhogi/3/