Here is my code:
css
*{
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
position: absolute;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
html
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
I am struggling with my page layout.
I know there are some similar posts, I try but looks like my case is different.
How can my <div id=table> height exclude footer?
If possible, I don't wish to set a number for height.
Thanks.
Just remove position: absolute; from footer.
Edit:
One better solution is remove height and minheight from body, #table and .container and use display:flex.
Give following css to .container
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
* {
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
}
body {
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
add this css
#table {
display: table;
height: calc(100% - 31px);
}
Change css for footer
footer {
background-color: #ffffff;
border-top: 1px solid #e7eaec;
bottom: 0;
height: auto;
text-align: center;
width: 100%;
}
Related
I'm creating a homepage for my website and want a logo (avatar) to appear on the left hand side of the page and a login form to appear on the right hand side. My current code displays a centered login box and avatar. The avatar is directly above the login box (and slightly offscreen).
Ideally I'm looking to replicate facebooks homepage theme (facebook.com)
Any ideas?
html
{% load static %}
{#<link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">#}
<html lang="">
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
<body>
<div class="rows">
<div class="logo">
<img src="{% static "homepage/images/my_logo.png" %}"
class="avatar"
alt=""
width=""
height="">
</div>
<div class="login-box">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Sign-up<br>
</form>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
background-size: cover;
background: black center;
font-family: sans-serif;
}
.avatar {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 100px);
}
.login-box{
float: right;
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ffc107;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: lightgray;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover {
color: #ffc107;
}
Here is a basic example of placing two items side by side across the screen. The first uses display grid, and outlines 2 columns, the second is using flex.
img{
height: 50vh;
}
.grid-container{
display: grid;
height: 50vh;
grid-template-columns: auto 1fr;
}
.flex-container{
display: flex;
height: 50vh;
}
.login {
display: flex;
flex-direction: column;
}
<div class="grid-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
<div class="flex-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
With the following code, it shows me that the form is centered on its right side which isn't what I'm going for. I struggle to align the form in the center of the page from the center of the form. I added the HTML and CSS so you can see what it looks like. I hope someone can help resolve this problem :')
.contacter {
width: 90%;
margin: 5%;
text-align: center;
padding-top: 0px;
}
.contacter h1 {
font-size: 36px;
font-weight: 700;
text-align: center;
color: rgb(255, 255, 255);
}
/*formulaire -------------------------------------------------------------------------*/
.formulaire {
text-align: center;
margin: 5%;
padding-top: 0;
width: 90%;
}
.row {
text-align: center;
}
.form {
max-width: 50%;
margin-bottom: 1rem;
}
.form {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 10px;
align-items: center;
}
#message {
height: 200px;
}
.btn {
border-radius: 10px;
height: 50px;
background-color: #9BA7C0;
border-color: transparent;
width: 175px;
font-size: 1rem;
}
div.frm {
display: block;
text-align: center;
}
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
<section>
<div class="boite-1">
<section class="contacter">
<h1>CONTACTER L'ETUDE</h1>
<div class="formulaire">
<form class="frm">
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="nom" id="nom" placeholder="Nom*">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="societe" id="societe" placeholder="Société">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="mail" id="mail" placeholder="Adresse mail*">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="tel" id="tel" placeholder="Téléphone*">
</div>
</div>
<div class="row">
<div class="frm-col">
<textarea class="form" name="message" id="message" cols="30" rows="7" placeholder="Message*"></textarea>
</div>
</div>
<div class="row">
<div class="sbmt">
<input type="submit" value="Envoyer la demande" class="btn">
<span class="demande envoyée"></span>
</div>
</div>
</form>
</div>
</section>
</div>
</section>
you can use
.frm-col {
display: flex;
justify-content: center;
}
In Your css file replace the .contacter with this below
.contacter {
width: 90%;
margin: 5%;
text-align: center;
padding-top: 0px;
width:100%;
display: flex;
align-items: center;
justify-content: center;
}
This will solve your issue
for more info on flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.formulaire{
margin: auto;
padding-top: 0;
width: 90%; // try using a fixed with if it is still not working
}
or
.frm-col{
display: flex;
justify-content: center;
}
This question already has answers here:
Center image using text-align center?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
For a long time, I am trying to resolve this issue but I was not able to find a good solution for this. I need to align this image on the center of the form but I am totally unsuccessful in it. You may feel like I am elaborating too much, but this is because StackOverflow is not letting me post this question because it thinks that this question needs deep elaboration. I don't know why.
This is my HTML:
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
This is my CSS:
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
How can I align the image in the center? I have tried many ways. But I am not able to do it. I have tried aligning using display flex property and tried aligning it in the center and tried to justify the content in the center!
.imagecontainer {
text-align: center;
}
Will do the job.
Adding text-align:center should solve your problem -
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer" style="text-align:center">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
display: flex;
justify-content: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
You need to use the flex property on the parent.
Add this to your css
.imagecontainer {
display: flex;
justify-content: center;
}
Just use margin
html, body {
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
text-align: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
Try to use margin:auto on imagecontainer div.
You can make use of <center> tag.
<center>
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
</center>
Just place the above code in place of imagecontainer div. You need to wrap the div in center tag.
Given I have the html and css in the snippet below the question, how can I vertically centre the login view no matter what screen height is?
I have tried this for the .login-layout__positioner class:
.login-layout__positioner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 42%;
transform: translateY(-42%);
}
But this does not centre well in large screen heights?
Is there a better way?
body {
height: 100%;
background-color: #f7f7f4;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
background-color: #fff
}
.banner__top {
padding-top: 15px;
}
.login-layout__container {
background-color: #f7f7f4;
width: 100%;
}
.login-layout__positioner {
text-align: center;
margin: auto;
}
footer {
background-color: #0065bd;
}
a {
color: #fff;
}
ul {
list-style: none;
margin-left: 0;
}
li {
display: inline;
}
.form__group {
background-color: #fff;
}
<body>
<div id="root">
<div class="main-content">
<div class="app-layout__body">
<div class="app-layout__container">
<div class="banner__container">
<div class="banner__top">
<div>
<div>
<h2>Banner</h2></div>
</div>
</div>
</div>
<div class="login-layout__container">
<div class="login-layout__positioner">
<div class="form__group">
<div>
<form>
<div class="login__container">
<div class="login__wrapper">
<div>
<div>
<div class="login__form__elements">
<div>
<div>
<h2 class="">Sign In</h2></div>
</div>
<div>
<div>
<div>
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div>
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
<div id="email-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div>
<div>
<label for="password" id="password-label">Password</label>
<div>
<input type="password" autocomplete="off" id="password" name="password" aria-invalid="false" aria-describedby="password-error" value="">
</div>
<div id="password-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div><a to="/">Forgotten your password?</a></div>
<div>
<button type="submit">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<div>
<div>
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>
When it comes to centering something both vertically and horizontally I like to use css flex. Adding it to the parent container surrounding the element you wish to center will cause it to flex in all screen dimensions and heights. Justify-content centers it horizontally and align-items centers it vertically. Here is a helpful guide to learn more about flex:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent-container{
width:100vw;
height:100vh;
background-color:black;
display:flex;
justify-content:center;
align-items:center;
}
.child{
width:50%;
background-color:white;
text-align:center;
}
<div class="parent-container">
<div class="child">
<h1>Centered</h1>
</div><!-- child -->
</div><!-- parent-container -->
Flexbox and grid work great for this, the difference being that grid is said to be 2 dimensional whereas flexbox is 1 dimensional. See MDN's Relationship of flexbox to other layout methods. BTW: If you want a sticky footer add min-height: 100vh; to your container.
Both Ron and Jeh's answer are correct. Though I'm wondering why do you have so many container wrappers then if you can just use certain wrappers to display your entire login form, banner and footer.
Here's my template for my custom login forms.
You will noticed that I use calc on height to differentiate the height of banner and footer and then less it to the height of your .section-login container, in which it will automatically adjusted the height no matter what the browser height does. And I declared min-height just to avoid overlaying above to each container wrapper.
Hope this helps.
.login {
background: pink;
margin: 0;
padding: 0;
}
.body-wrapper {
background: white;
width: 100%;
height: 100vh;
}
.hero-wrapper,
.globalfooter {
background: #CCC;
text-align: center;
}
.hero-wrapper {
line-height: 200px; /* just for the text v-alignment only */
height: 200px;
}
.globalfooter {
line-height: 100px; /* just for the text v-alignment only */
height: 100px;
}
.section-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #EEE;
min-height: calc(100% - (200px + 100px));
padding: 30px;
box-sizing: border-box;
}
.help-text-wrapper {
font: 300 12px sans-serif;
color: red;
text-align: center;
margin: 15px 0 0;
}
.help-text-wrapper.hidden {
/* Remove comment to enable
display: none; */
}
h1 {
font: 600 24px sans-serif;
text-align: center;
text-transform: uppercase;
margin: 0 0 15px;
}
form {
background: #FFF;
font: 300 12px sans-serif;
text-transform: uppercase;
width: 260px;
padding: 30px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
box-sizing: border-box;
border-radius: 3px;
}
form > fieldset {
margin: 0 0 15px;
padding: 0;
border: 0;
}
form > fieldset label:first-child {
display: block;
margin-bottom: 15px;
}
form input {
display: block;
width: 100%;
height: 30px;
margin: 5px 0;
padding: 6px;
box-sizing: border-box;
}
form button {
display: block;
background: #888;
color: #FFF;
text-transform: uppercase;
height: 30px;
margin: auto;
padding: 7px 15px;
border: 0;
cursor: pointer;
}
<body class="login page">
<div class="body-wrapper">
<header class="hero-wrapper">
Banner
</header>
<section class="section-login">
<h1>Sign In</h1>
<form action="" method="post">
<fieldset>
<label for="username">
Username
<input type="text" id="username" value="" placeholder="Username" autofocus>
</label>
<label for="password">
Password
<input type="password" id="password" value="" placeholder="Password">
</label>
</fieldset>
<button type="submit">Login / Sign In</button>
</form>
<div class="help-text-wrapper hidden">
Something around here after fallback.
</div>
</section>
<footer class="globalfooter">
Footer
</footer>
</div>
</body>
Just change some class properties which I wrote down:
.login-layout__positioner {
display: flex;
align-items: center;
justify-content: center;
}
.form__group {
background-color: transparent;
}
a {
color: #333;
}
footer a {
color: #fff;
}
I'm trying to float 2 divs next to each other and I want the right div to give a margin in relation to it's parent while the left div is shown in front of the margin of the right div.
I have this code below with some labels and input fields. I gave the inputwrapper a margin-left of 220px to align the inputfields vertically but they don't.
So my quetion is how to get these inputfields vertically aligned without using a table?
Thanks in advance
Code snippet:
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Use position: absolute; for labelwrapper class.
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
position: absolute;
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Just change the following classes in your css file
.labelwrapper {
border: 1px red solid;
float: left;
}
.inputwrapper {
border: 1px blue solid;
float: right;
margin-right:100px;
}