I have created a form that is aligned horizontally with the labels on top.
I had some difficulty aligning the = button, and I used a trick with   to align it. I couldn't find any better solution for this, is there something better to do?
I want to apply a border around the form and align it in the center of the page.
I have tried several things, like placing it inside a table, or using another div but with no success.
This is my code until now (I have not included the script for the calculations):
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</div>
</form>
</body>
</html>
You can create a wrapper DIV around it and make that a flex container, using the following settings to achieve the centering both horizontally and vertically:
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form {
padding: 10px;
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</div>
</body>
</html>
What you might do is give the form a width and use margin: 0 auto to align it in the middle and set overflow: auto;
For example:
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right:20px;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div>
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div>
<label for="O">Operator</label>
<select name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div>
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div>
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div>
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</body>
</html>
Related
This question already has answers here:
Positioning Form Elements [duplicate]
(4 answers)
How to align input forms in HTML
(17 answers)
Closed 4 months ago.
I am attempting to have my form input text boxes all line up. However, they are unaligned and I have been unable to solve this. What should I do?
body{
background-color: rgb(134, 210, 221)
}
.event{
display: inline;
float: left;
clear: both;
}
.radio1{
display: inline;
float: left;
}
.radio2{
float: left;
}
.gender{
display: block;
float: left;
clear: both;
}
.required{
color: red;
}
p{
clear: both;
}
label{
display: block;
float: left;
}
#date{
float: left;
}
.submit{
text-align: center;
}
input{
display: inline-block;
margin-left: 10px;
clear: both;
}
<body>
<form>
<p class="event"><span class="required">*</span>Select Event:</p>
<div class="radio1">
<p><input type="radio" id="stock">Stock</p>
<p><input type="radio" id="modified">Modified</p>
</div>
<p><span class="required">*</span>Last Name: <input type="text" name="lastname" id="lastname" />
</p>
<p><span class="required">*</span>First Name: <input type="text" name="firstname" id="firstname"></p>
<p><span class="required">*</span>Address: <input type="text" name="address" id="address"></p>
<p><span class="required">*</span>City: <input type="text" name="city" id="city"></p>
<p><span class="required">*</span>Province: <select name="selectprovince" id="selectprovince">Select Province
<option value="provinces">...</option>
<option value="provinces">AB</option>
<option value="provinces">BC</option>
<option value="provinces">MB</option>
<option value="provinces">NB</option>
<option value="provinces">NL</option>
<option value="provinces">NT</option>
<option value="provinces">NS</option>
<option value="provinces">NU</option>
<option value="provinces">ON</option>
<option value="provinces">PE</option>
<option value="provinces">QC</option>
<option value="provinces">SK</option>
<option value="provinces">YT</option>
</select></p>
<p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
<p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
<p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>
<label for="date"><span class="required">*</span>Date of Birth</label>
<input type="date" name="date" id="date">
<p class="gender"><span class="required">*</span>Gender: </p>
<div class="radio2">
<p><input type="radio">Male</p>
<p><input type="radio">Female</p>
<p><input type="radio">Other</p>
</div>
<div class="bottom">
<p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>
<p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
</div>
<p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
<div class="submit">
<input type="submit" id="submit">
</div>
</form>
</select>
HTML structure is very important to understand and to learn how it works and how to put elements together. If you have a good HTML structure, it will be easy to edit and style.
One of your mistakes is that you put the input inside the p. So what you should do is put each row (elements group) in a container with flex display. and put them separated properly in a good structure. then give all elements on the left, the same width to align all right elements properly in a vertical line.
here I did that for the first three groups in your code. you can follow the same steps to do for the rest.
body{
background-color: rgb(134, 210, 221)
}
.container {
border: 1px solid red;
height: fit-content;
display: flex;
min-width: fit-content;
align-items: center;
}
.left {
display: flex;
flex-direction: row;
width: 100px;
/* height: 10px; */
border: 1px solid;
position: relative;
margin-right: 5px;
}
.right {
border: 1px solid blue;
width: 400px;
}
select {
display: flex;
}
.event{
/* display: inline;
float: left;
clear: both; */
}
.radio1{
/* display: inline;
float: left; */
}
.radio2{
/* float: left; */
}
.gender{
/* display: block;
float: left;
clear: both; */
}
.required{
color: red;
}
p{
/* clear: both; */
}
label{
/* display: block;
float: left; */
}
#date{
/* float: left; */
}
.submit{
text-align: center;
}
input{
/* display: inline-block;
margin-left: 10px;
clear: both; */
}
<form>
<div class="container">
<p class="event left"><span class="required">*</span>Select Event:</p>
<div class="radio1 right">
<p><input type="radio" id="stock">Stock</p>
<p><input type="radio" id="modified">Modified</p>
</div>
</div>
<div class="container">
<p class="left">
<span class="required">*</span>
Last Name:
</p>
<input class="right" type="text" name="lastname" id="lastname"/>
</div>
<div class="container">
<p class="left">
<span class="required">*</span>
First Name:
</p>
<input class="right" type="text" name="firstname" id="firstname">
</div>
<p class="left">
<span class="required">*</span>
Address:
<input class="right" type="text" name="address" id="address"></p>
<p class="left">
<span class="required">*</span>
City:
<input class="right" type="text" name="city" id="city"></p>
<p class="left"><span class="required">*</span>
Province:
<select class="right" name="selectprovince" id="selectprovince">Select Province
<option value="provinces">...</option>
<option value="provinces">AB</option>
<option value="provinces">BC</option>
<option value="provinces">MB</option>
<option value="provinces">NB</option>
<option value="provinces">NL</option>
<option value="provinces">NT</option>
<option value="provinces">NS</option>
<option value="provinces">NU</option>
<option value="provinces">ON</option>
<option value="provinces">PE</option>
<option value="provinces">QC</option>
<option value="provinces">SK</option>
<option value="provinces">YT</option>
</select>
</p>
<select>
<p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
<p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
<p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>
<label for="date"><span class="required">*</span>Date of Birth</label>
<input type="date" name="date" id="date">
<p class="gender"><span class="required">*</span>Gender: </p>
<div class="radio2">
<p><input type="radio">Male</p>
<p><input type="radio">Female</p>
<p><input type="radio">Other</p>
</div>
<div class="bottom">
<p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>
<p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
</div>
<p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
<div class="submit">
<input type="submit" id="submit">
</div>
</form>
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>
Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.
Newbie coder here working on a project that's making me insane. I have tried everything I can think of. I know it has to do with the width but I can not figure it out so that all the content aligns. I am looking to align the label with the checkbox input within the fieldset and have it centered. I tried removing the 100% width, using flex display, changing the display to inline-block, and other various things but with no success- Any help would be GREATLY appreciated!
<div class="container">
<h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
<p>Please fill out the form below to contact us</p>
<form action="process.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="state-select">Choose Your State:</label>
<select name="state" id="state-select">
<option value="">Required</option>
<option value="ct">Connecticut</option>
<option value="ny">New York</option>
<option value="ma">Massachusets</option>
<option value="nh">New Hampshire</option>
<option value="me">Maine</option>
</select>
</div>
</form>
<fieldset>
<legend>Newsletter</legend>
<div>
<input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe Me</label>
</div>
</fieldset>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
<button type="submit" class="btn">Submit</button>
</div>
</section>
</div>
CSS
#contact-form .form-group {
margin-bottom: 20px;
}
#contact-form {
display: block;
margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea {
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea {
height: 200px;
}
#contact-form input:focus,
#contact-form textarea:focus {
outline: none;
border-color: #12cad6;
}```
Add a class to the div that contains the label and checkbox
<div class="subscribe-news__container">
<input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe Me</label>
</div>
.subscribe-news__container {
display: flex; // this will fix it you may need to add some margin-left to the label
justify-content: center; // this will center horizontally within the div the page when using flex
align-items: center; // this will center your items vertically when using flex
}
I also suggest looking into some flex options like justify-content, and align-items as well. They are explained above.
You are also doing a lot of selections with ID's I would suggest using classes instead.
Classes are meant to be reused while ID's are not. This also plays into issues with accessibility as duplicate ID's can become a problem.
I hope this helps :)
Full Code I Tested with. The style tag is only included for the sake of being able to test quickly on my end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#contact-form .form-group {
margin-bottom: 20px;
}
#contact-form {
display: block;
margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea {
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea {
height: 200px;
}
#contact-form input:focus,
#contact-form textarea:focus {
outline: none;
border-color: #12cad6;
}
.subscribe-news__container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
<p>Please fill out the form below to contact us</p>
<form action="process.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="state-select">Choose Your State:</label>
<select name="state" id="state-select">
<option value="">Required</option>
<option value="ct">Connecticut</option>
<option value="ny">New York</option>
<option value="ma">Massachusets</option>
<option value="nh">New Hampshire</option>
<option value="me">Maine</option>
</select>
</div>
</form>
<fieldset>
<legend>Newsletter</legend>
<div class="subscribe-news__container">
<input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe Me</label>
</div>
</fieldset>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
<button type="submit" class="btn">Submit</button>
</div>
</section>
</div>
</body>
</html>
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 make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>