I was trying to make a simple circle buttons to represent pizza size buttons but I'm having trouble centering the text if anyone has a solution, you can text it out your self I've tried using
padding, stretches circle as well
margin, no response
Not sure what I'm doing wrong, thanks
.pizzaOptions {
margin: 1em;
padding-top: 1%;
width: 60%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-self: center;
align-content: space-between;
}
input {
opacity: 0;
}
.size {
display: inline-block;
margin: 1em;
height: 100px;
width: 100px;
border: 15px #333 solid;
border-radius: 50%;
margin: auto;
}
span {
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
}
#small {
font-size: 1em;
width: 100px;
height: 100px;
}
#medium {
margin: 20px;
font-size: 1.5em;
width: 150px;
height: 150px;
}
#large {
font-size: 2em;
width: 200px;
height: 200px;
}
<div class="pizzaOptions">
<label class="hover size" for="c1" id="small">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="4.00" id="c1"><span>SMALL <div class="displaySize"> 4"</div> <div class="displayPrice">£4.00</div></span>
</label>
<label class="hover size" for="c2" id="medium">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="6.00" id="c2"><span>MEDIUM <div class="displaySize"> 6"</div> <div class="price">£6.00</div></span>
</label>
<label class="hover size" for="c3" id="large">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="9.00" id="c3"><span>LARGE <div class="displaySize"> 9"</div> <div class="price">£9.00</div></span>
</label>
</div>
Try the following code using flexbox:
.pizzaOptions {
margin: 1em;
padding-top: 1%;
width: 60%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-self: center;
align-content: space-between;
}
input {
opacity:0;
position:absolute;
}
.size {
margin: 1em;
height: 100px;
width: 100px;
border: 15px #333 solid;
border-radius: 50%;
margin: auto;
}
span {
text-align: center;
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
width:100%;
}
label {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#small {
font-size: 1em;
height: 100px;
width: 100px;
}
#medium {
margin: 20px;
font-size: 1.5em;
height: 150px;
width: 150px;
}
#large {
font-size: 2em;
height: 200px;
width: 200px;
}
<div class="pizzaOptions">
<label class="hover size" for="c1" id="small">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="4.00" id="c1"><span>SMALL <div class="displaySize"> 4"</div> <div class="displayPrice">£4.00</div></span>
</label>
<label class="hover size" for="c2" id="medium">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="6.00" id="c2"><span>MEDIUM <div class="displaySize"> 6"</div> <div class="price">£6.00</div></span>
</label>
<label class="hover size" for="c3" id="large">
<input class="items right" onclick="findTotal()" type="radio" name="size" value="9.00" id="c3"><span>LARGE <div class="displaySize"> 9"</div> <div class="price">£9.00</div></span>
</label>
</div>
Amend display property of span
#span{
display:block;
}
As table-cell behave improper alignment when used other that table. It doesn't obey other rules like vertical-align , float etc.
Related
I want to create a form that has 2 buttons at the last row and to be aligned to the right. I am using CSS grid. What i am doing wrong here in the screenshot?
**css
**
.wrapper {
width:75%;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 15px;
margin: 0;
background: white;
display: grid;
grid-template-columns: 35% 65%;
.grid-item {
font-size: 16px;
font-weight: normal;
color: #4D4D4D;
background: #FFFFFF;
border: 1px solid #828995;
height: 20px;
}
label {
font-size: 16px;
font-weight: normal;
color: #4D4D4D;
padding: 14px 0 0 0;
display: inline-block;
font-family: "Corpid";
}
}
<form>
<div className="wrapper">
<label htmlFor="email">Email*</label>
<input id="email" type="text" className="grid-item"/>
<label htmlFor="name">Name*</label>
<input id="name" type="text" className="grid-item"/>
<BaseButton >{"Back"}</BaseButton>
<BaseButton>{"Send"}</BaseButton>
</div>
</form>
.wrapper {
width:75%;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 15px;
margin: 0;
background: white;
display: grid;
grid-template-columns: 35% 65%;
}
.grid-item {
font-size: 16px;
font-weight: normal;
color: #4D4D4D;
background: #FFFFFF;
border: 1px solid #828995;
height: 20px;
}
label {
font-size: 16px;
font-weight: normal;
color: #4D4D4D;
padding: 14px 0 0 0;
display: inline-block;
font-family: "Corpid";
}
.buttons-wrapper {
display: flex;
flex-direction: row;
justify-content: end;
color: red;
width: 100%;
grid-column: span 2;
}
<form>
<div class="wrapper">
<label htmlFor="email">Email*</label>
<input id="email" type="text" class="grid-item"/>
<label htmlFor="name">Name*</label>
<input id="name" type="text" class="grid-item"/>
<div class="buttons-wrapper">
<div >{"Back"}</div>
<div>{"Send"}</div>
</div>
</div>
</form>
I'm adding a new div element so I can wrap the two elements and then set their display to flex and direction to row so we can keep them in the same row and then we justify the content of buttons-wrapper to the right...
That should handle your case.
<form>
<div className="wrapper">
<label htmlFor="email">Email*</label>
<input id="email" type="text" className="grid-item"/>
<label htmlFor="name">Name*</label>
<input id="name" type="text" className="grid-item"/>
<div className="buttons-wrapper">
<BaseButton >{"Back"}</BaseButton>
<BaseButton>{"Send"}</BaseButton>
</div>
</div>
</form>
.buttons-wrapper {
display: flex;
flex-direction: row;
justify-content: end;
width: 100%;
grid-column: span 2;
}
Im building a website that is like an airport booking's website
it has this table
i don't know how can I style it as shown in the photo
this is what I did
<div className="section>">
<div className="content">
<div className="container">
<div className="row">
<div className="planner">
<form>
<div className="checkbox">
<div className="row">
<label>
<input
className="checkbox-round"
type="checkbox"
defaultChecked={checked}
onChange={() => setChecked(!checked)}
/>
Türkiye'den Gönder
</label>
</div>
<label>
<input
className="checkbox-round"
type="checkbox"
defaultChecked={!checked}
onChange={() => setChecked(!checked)}
/>
Türkiye'ye Getir
</label>
</div>
<div className="form">
<div className="row">
<label htmlFor="">Kurye Taşıması</label>
<label> Nereye</label>
</div>
<div className="row">
<select>
<option value="">Almanya</option>
<option value=""></option>
</select>
</div>
<div className="labels">
<div className="inputs">
<label>AĞRILIK</label>
<input type="weight" placeholder="KG" />
<label>UZUNLUK</label>
<input type="height" placeholder="CM" />
<label>CENSLIK</label>
<input type="height" placeholder="CM" />
<label> YUKSELIK</label>
<input type="height" placeholder="CM" />
</div>
</div>
<div className="row">
<div className="total">
<h2>ODENECEK TUTAR</h2>
</div>
<button>DEVAM ET</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
and this is the CSS file
.checkbox{
margin: 0px 5px 0px 0px;
padding: 10px;
align-items: center;
justify-content: center;
}
.checkbox-round {
display: inline-block;
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
body{
overflow: hidden;
background-color: #2a3541 !important;
}
.dot{
color: rgb(236, 5, 5);
}
.container{
max-width: 100%;
margin: 0;
padding: 0;
background-color: #2a3541;
} .planner{
margin: 22px 200px 20px 20px !important;
border:2px #ddd;
border-radius:10px;
background-color: #f1f1f1;
padding: 1rem;
margin: 0;
max-width: 100%;
}
.row{
float: right;
width: 40%;
display: inline-flex;
flex-direction: row;
}
.inputs{
display: inline;
max-height:100%;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
background-color: #f1f1f1;
border-radius: 10px;
color: #2a3541;
}
.labels{
display: block;
}
div label{
display:block;
}
so basically, what I can't figure out is how to put the inputs beside each other just like the given photo with saving the positions of other divs
I have the following fiddle: https://jsfiddle.net/uosLke60/
I would like the input button to center underneath the quantity selector. How can I achieve this?
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
Thanks for your input.
You'll have to change a few things.
Note: A few of my changes are not a good practice like using !important, but I had to use it because it wasn't changing, so I had to force an overwrite there.
.Product_Card_Button {
width: fit-content;
}
quantity-input {
display: block !important;
width: 100% !important;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
padding: 5px 0px;
}
.quantity-form {
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
}
.quantity-form > quantity-input {
height: 100%;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add" class="quantity-form">
<div>
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
</div>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
On this approach, I decided to use flexbox, because it was the easiest way to align items, I had to change the width as well or it wouldn't truly align to the center.
**Remove "display: inline-flex;"**
<style>
form{text-align: center;}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
****Another solution****
quantity-input.quantity {
width: max-content !important;
}
</style>
You can use width:fit-content and text-align: center on form.
Note that the button is centered in the form, but not with the input value because of the type="number" adding buttons on the right (Center text in html number input).
form{
width:fit-content;
text-align: center;
border:1px solid black;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
opacity: 1;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
cursor: pointer;
font-size: 13px;
width: 120px;
}
input{
text-align: center;
}
<form method="post" action="/cart/add">
<div class="quantity">
<button> - </button>
<input type="number" name="quantity" id="quantity" min="1" value="1">
<button> + </button>
</div>
<br>
<input type="submit" class="Add_To_Cart_Button" />
</form>
Here you go, without changing your CSS just add some, like a grid system / flexbox:
DEMO
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
/* ADDED */
quantity-input{
flex-wrap: wrap;
}
button{
flex: 1 0 50%;
max-width: 100%;
order: 2;
margin: auto;
}
#quantity{
flex: 0 0 100%;
order: 1;
max-width: calc(100% - 8px);
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
You only need to change your display: inline-block, change the width to 100% and add a text-align: center;, and it should be working
Add text-align: center to the form. https://jsfiddle.net/211368e/8vkLzg6c/9/
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
form{
text-align: center;
}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="min-width: 50vw; min-height: 25.4px; display: inline-flex">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
Replace margin-bottom: 40px; with margin: 0 0 40px 40px;
This way you are adding 40px of margin on left and bottom side of the button
Im working on a project, but my elements are very spaced out and I'm not the best at CSS. I don't know if it's doing it on it's own or something is wrong with my CSS. Can you please help find the problem?
<body>
<div class='top'>
<div class='top-left'>
<input type='text' class='info' id='totalBill' placeholder='Total bill'>
<input type='text' class='info' id='peopleAmount' placeholder='People'>
</div>
<div class='top-right'>
<div class='tip'>
<input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
</div>
<button onclick = "calculate()"> Calculate </button>
</div>
</div>
<div class="bottom">
<input id="output" disabled>
<input id="moneyOutput" disabled>
</div>
</body>
</html>
CSS File Link - https://aaryank.codewizardshq.com/BillSplitter/style.css
Just replace the justify-content: space-around; to the justify-content: center; this will leave small space between your inputs and also reduce the height if you like like the following in your edited code
* {
outline: none;
border: none;
font-family: 'Fira Sans', sans-serif;
margin: 0;
}
.top-left,
.top-right {
position: absolute;
height: 60vh;
width: 50vw;
top: 0;
}
.top-right {
right: 0;
background: #7ACFD7;
}
.top-left {
left: 0;
background-color: #C22629;
}
.bottom {
position: absolute;
height: 40vh;
/*edited from height: 60vh;*/
width: 100vw;
bottom: 0;
left: 0;
background-color: #F1EFEE;
}
.top-left,
.top-right,
.bottom {
flex-direction: column;
display: flex;
justify-content: center;
/*Edited from justify-content: space-around;*/
place-items: center;
}
/**/
input[class='info'] {
font-size: 20px;
padding: 15px;
border-radius: 5px;
background: #FFF;
margin: 10px;
font-family: 'Fira Sans', sans-serif;
display: block;
}
input,
input::placeholder {
color: grey;
}
button {
font-size: 18px;
padding: 15px;
width: 50%;
;
background-color: transparent;
color: #F1EFEE;
border: 3px solid #F1EFEE;
border-radius: 10px;
cursor: pointer;
}
#output {
font-size: 20px;
background-color: transparent;
border-radius: 5px;
text-align: center;
color: black;
width: 50%;
}
#moneyOutput {
font-size: 50px;
padding: 5px;
background-color: transparent;
border-radius: 5px;
text-align: center;
color: black;
width: 50%;
}
<div class='top'>
<div class='top-left'>
<input type='text' class='info' id='totalBill' placeholder='Total bill'>
<input type='text' class='info' id='peopleAmount' placeholder='People'>
</div>
<div class='top-right'>
<div class='tip'>
<input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
</div>
<button onclick="calculate()"> Calculate </button>
</div>
</div>
<div class="bottom">
<input id="output" disabled>
<input id="moneyOutput" disabled>
</div>
I have a quick question. How can I move my login form div to the left and have a vertical separator in the center of the page and still be able to place content on the right side of the page as well? What I thought of doing is using display: inline but when I use display: inline in my wrapper div it ruins the setup of the page. Thanks!
Code
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
body {
background-color: #ced4da;
}
.wrapper {
height: 100vh;
position: relative;
background-color: red;
}
.login-form {
background-color: green;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>
<body>
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
<div class="splitter"></div>
</div>
</body>
Relatively simple using Flexbox, we don't set a flex value on the div.leftside so it's width stays dependent on the content, the splitter can be represented by a border, however having it being a separate element opens more styling possibilities
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
.main {
display: flex;
height: 100vh;
}
.rightSide {
flex: 1 0 0%;
background: #7e7eff;
}
.leftSide {
background: #262658;
padding: 0 20px;
display: flex;
align-items: center;
}
.splitter {
background: grey;
width: 10px;
}
.login-form {
background-color: #1d1f20;
border: 1px solid;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<div class="main">
<div class="leftSide">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
<div class="splitter"></div>
<div class="rightSide">
</div>
</div>
Same can be achieved using CSS Grid
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
.main {
display: grid;
height: 100vh;
grid-template-columns: auto auto 1fr;
}
.rightSide {
background: #7e7eff;
}
.leftSide {
background: #262658;
padding: 0 20px;
display: flex;
align-items: center;
}
.splitter {
background: grey;
width: 10px;
}
.login-form {
background-color: #1d1f20;
border: 1px solid;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<div class="main">
<div class="leftSide">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
<div class="splitter"></div>
<div class="rightSide">
</div>
</div>
EDIT :
The way we align stuff inside a flexed container is : align-self on the flex items or aling-items on the flexed container, Now since flexbox only goes in one direction either vertically or horizontally, we change that using flex-direction property, we put one vertically and align the items as we like, then put another one horizontally and align the items as we like.
I tried to make my own example to make it somewhat clean ?
It's better if you would find a course about flexbox, google it or look for it on youtube (which where i learned everything i know)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
.main {
height: 100vh;
background-color: pink;
display: flex;
}
.main>.left {
flex: 1;
display: flex;
background: brown;
}
.main>.left>.form-wrapper {
flex: 1;
background: orange;
padding: 10px;
align-self: center;
display: flex;
flex-direction: column;
}
.main>.left>.form-wrapper>form {
background: #1d1f20;
padding: 10px;
width: 200px;
align-self: flex-end;
}
.main>.left>.form-wrapper>form>input {
margin-bottom: 5px;
width: 100%;
}
.main>.split {
width: 5px;
background: #00ff74;
}
.main>.right {
flex: 1;
background: purple;
display: flex;
}
.main>.right>.welcome {
flex: 1;
background: #2d162d;
align-self: center;
display: flex;
flex-direction: column;
}
.main>.right>.welcome>h2 {
background: #9a7d9a;
align-self: center;
}
<div class="main">
<div class="left">
<div class="form-wrapper">
<form>
<input type="text" placeholder="Name" name="">
<input type="text" placeholder="Email" name="">
<input type="button" value="Done !" name="">
</form>
</div>
</div>
<div class="split"></div>
<div class="right">
<div class="welcome">
<h2>Welcome !</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>
</div>
</div>
I used flex to create what you required. You will have to check the new CSS and HTML(separator and right-side part) to completely understand what I did.
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
body {
background-color: #ced4da;
}
.wrapper {
height: 100vh;
position: relative;
background-color: red;
display: flex;
justify-content: space-around;
}
.wrapper .login-form,
.wrapper .right-side {
width: 45%;
}
.login-form {
background-color: green;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
color: grey;
width: 100%;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
.separator {
width: 0px;
border: 2px solid black;
}
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>
<body>
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
<div class="separator"></div>
<div class="right-side">Right side content</div>
</div>
</body>
You should probably look into Flexbox or other options. W3 has a couple of ways to setup a two column layout in their howto article: https://www.w3schools.com/howto/howto_css_two_columns.asp
Also checkout the complete guide to flexbox from css-tricks