How to change the layout of a sign-up page

Question

I'm trying to change my sign-up page so that the avatar is to the left and the username, password boxes etc are to the right. I've tried using split divs but this doesn't seem to work. I've also tried positioning the avatar to the left but that also hasn't worked. Here is my style and body code.

body {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  border: 3px solid #f1f1f1;
}

* {
  margin: 0;
  padding: 0;
}

#logo {
  float: left;
  display: inline-block;
  object-fit: none;
  background: transparent;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 10px;
}

.navbar {
  overflow: hidden;
  background-color: #D47ACE;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.navbar-logo {
  font-size: 25px;
  word-spacing: 0px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 23px;
  font-style: normal;
  font-family: "Rockwell", Monaco, monospace;
  letter-spacing: 0px;
  word-spacing: 5px;
  font-weight: 700;
}

#nav li {
  display: inline;
  padding-right: 30px;
}

.navbar a:hover {
  color: #ffffff;
}

#demoFont {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 29px;
  letter-spacing: 5.2px;
  word-spacing: 2px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

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 {
  background-color: pink;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
  padding-top: 10vh;
  padding-bottom: 0vh;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.button {
  background-color: pink;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="https://via.placeholder.com/568" 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">Enter</button>
    <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

Any help would be great.

Answer 1

One thing you can do is add a display: flex on the form, setting its contents to wrap when there is no more available space on the line. Then you can set a width of 100% on the last .container which is housing the cancel button and forgotten password link, forcing it to a new line.

Here is that new CSS:

form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.imgcontainer .avatar {
  padding-top: 0;
}

/* .imgcontainer+.container means the .container adjacent to `.imgcontainer */

.imgcontainer,
.imgcontainer+.container {
  flex: 1;
}

/* .container+.container means the last .container in your case */

.container+.container {
  width: 100%;
}

Which produces:

Demo

form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.imgcontainer,
.imgcontainer+.container {
  flex: 1;
}

.imgcontainer .avatar {
  padding-top: 0;
}

.container+.container {
  width: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  border: 3px solid #f1f1f1;
}

* {
  margin: 0;
  padding: 0;
}

#logo {
  float: left;
  display: inline-block;
  object-fit: none;
  background: transparent;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 10px;
}

.navbar {
  overflow: hidden;
  background-color: #D47ACE;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.navbar-logo {
  font-size: 25px;
  word-spacing: 0px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 23px;
  font-style: normal;
  font-family: "Rockwell", Monaco, monospace;
  letter-spacing: 0px;
  word-spacing: 5px;
  font-weight: 700;
}

#nav li {
  display: inline;
  padding-right: 30px;
}

.navbar a:hover {
  color: #ffffff;
}

#demoFont {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 29px;
  letter-spacing: 5.2px;
  word-spacing: 2px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

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 {
  background-color: pink;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
  padding-top: 10vh;
  padding-bottom: 0vh;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.button {
  background-color: pink;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="https://via.placeholder.com/568" 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">Enter</button>
    <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

Answer 2

You can use display: flex; property as shown in the below sample.

body {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  border: 3px solid #f1f1f1;
}

* {
  margin: 0;
  padding: 0;
}

.d-flex{ 
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
.img-container, .input-container {
  width: 50%;
}

.img-container {
  text-align: center;
}

#logo {
  display: inline-block;
  object-fit: none;
  background: transparent;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 10px;
}

.navbar {
  overflow: hidden;
  background-color: #D47ACE;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.navbar-logo {
  font-size: 25px;
  word-spacing: 0px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 23px;
  font-style: normal;
  font-family: "Rockwell", Monaco, monospace;
  letter-spacing: 0px;
  word-spacing: 5px;
  font-weight: 700;
}

#nav li {
  display: inline;
  padding-right: 30px;
}

.navbar a:hover {
  color: #ffffff;
}

#demoFont {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 29px;
  letter-spacing: 5.2px;
  word-spacing: 2px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

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 {
  background-color: pink;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
  padding-top: 10vh;
  padding-bottom: 0vh;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.button {
  background-color: pink;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<form action="/action_page.php" method="post" class="d-flex">
  <div class="img-container">
    <img src="https://via.placeholder.com/140x100" alt="Avatar" class="avatar">
  </div>

  <div class="input-container">
    <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">Enter</button>
      <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </div>
</form>