How to move login box to the right side?-CodePudding

I created a html login box and designed it, the problem is the login box is stuck on the left side of the screen. I've tried to shift it to the right but my methods have failed. Wondering if there's a simple solution to the issue or if maybe I added too many elements that are affecting it?

Example:

   .loginbox {
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
}

h2 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}

.avatar {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -50%;
  left: calc(50% - 50px);
}

.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}

.loginbox input[type="text"],
input[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}

.loginbox input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}

.loginbox input[type="submit"]:hover {
  cursor: pointed;
  background: #ffc107;
  color: #000;
}

.loginbox a {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
}

.loginbox a:hover {
  color: #ffc107;
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

<!-- Login Form Starts -->
<div >
  <img src="https://cdn.houseplansservices.com/product/scne5s9p1kk12soorouhkn56dt/w800x533.jpg?v=18" alt="avatar" >
  <h2>Login Here</h2>
  <form>
    <p>Username</p>
    <input type="text" name="Username" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="Password" placeholder="Enter Password">
    <input action="RoyalReaderHomePageL.php" type="submit" name="login_button" value="Login">
    <a href="#">Forgot your password?</a><br>
    <a href="signup.php">Not a member? Sign up Now</a>
  </form>
</div>
<!-- Login Form Ends -->

I tried to shift it to the left via changing the margin and adding padding but that method failed.

CodePudding user response：

Try using, css on your main div i.e..loginbox as float: right

CodePudding user response：

Add float: right; to .loginbox in CSS:

   .loginbox {
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
  float: right;
}

.loginbox {
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
  float: right;
}

h2 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}

.avatar {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -50%;
  left: calc(50% - 50px);
}

.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}

.loginbox input[type="text"],
input[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}

.loginbox input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}

.loginbox input[type="submit"]:hover {
  cursor: pointed;
  background: #ffc107;
  color: #000;
}

.loginbox a {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
}

.loginbox a:hover {
  color: #ffc107;
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

<!-- Login Form Starts -->
<div >
  <img src="https://cdn.houseplansservices.com/product/scne5s9p1kk12soorouhkn56dt/w800x533.jpg?v=18" alt="avatar" >
  <h2>Login Here</h2>
  <form>
    <p>Username</p>
    <input type="text" name="Username" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="Password" placeholder="Enter Password">
    <input action="RoyalReaderHomePageL.php" type="submit" name="login_button" value="Login">
    <a href="#">Forgot your password?</a><br>
    <a href="signup.php">Not a member? Sign up Now</a>
  </form>
</div>
<!-- Login Form Ends -->

CodePudding user response：

If you wrap your loginbox and assign the wrapper display flex you can push with justify-content: end; the box to the right.

.wrapper {
  display: flex;
  justify-content: end;
}

.wrapper {
  display: flex;
  justify-content: end;
}

.loginbox {
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
}

h2 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}

.avatar {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -50%;
  left: calc(50% - 50px);
}

.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}

.loginbox input[type="text"],
input[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}

.loginbox input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}

.loginbox input[type="submit"]:hover {
  cursor: pointed;
  background: #ffc107;
  color: #000;
}

.loginbox a {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
}

.loginbox a:hover {
  color: #ffc107;
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

<div >
  <!-- Login Form Starts -->
  <div >
    <img src="https://cdn.houseplansservices.com/product/scne5s9p1kk12soorouhkn56dt/w800x533.jpg?v=18" alt="avatar" >
    <h2>Login Here</h2>
    <form>
      <p>Username</p>
      <input type="text" name="Username" placeholder="Enter Username">
      <p>Password</p>
      <input type="password" name="Password" placeholder="Enter Password">
      <input action="RoyalReaderHomePageL.php" type="submit" name="login_button" value="Login">
      <a href="#">Forgot your password?</a><br>
      <a href="signup.php">Not a member? Sign up Now</a>
    </form>
  </div>
  <!-- Login Form Ends -->
</div>

CodePudding user response：

Just add margin-left: auto; and disply: block; to the loginbox div

.loginbox {
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
  display: block;
  margin-left: auto;
}
h2 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}

.avatar {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -50%;
  left: calc(50% - 50px);
}

.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}

.loginbox input[type="text"],
input[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}

.loginbox input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}

.loginbox input[type="submit"]:hover {
  cursor: pointed;
  background: #ffc107;
  color: #000;
}

.loginbox a {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
}

.loginbox a:hover {
  color: #ffc107;
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

<!-- Login Form Starts -->
<div >
  <img src="https://cdn.houseplansservices.com/product/scne5s9p1kk12soorouhkn56dt/w800x533.jpg?v=18" alt="avatar" >
  <h2>Login Here</h2>
  <form>
    <p>Username</p>
    <input type="text" name="Username" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="Password" placeholder="Enter Password">
    <input action="RoyalReaderHomePageL.php" type="submit" name="login_button" value="Login">
    <a href="#">Forgot your password?</a><br>
    <a href="signup.php">Not a member? Sign up Now</a>
  </form>
</div>
<!-- Login Form Ends -->

CodePudding user response：

Slightly unclear on your desire but perhaps put it in a 1 X 2 grid.

.loginbox {
  display: grid;
  grid-template-columns: minmax(400px, auto) / 1fr;
  width: 320px;
  background: #000;
  color: #fff;
  padding: 5px;
}

h2 {
  grid-column: 2 / 2;
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}

form {
  grid-column: 2 / 2;
}

.avatar {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -50%;
  left: calc(50% - 50px);
}

.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}

.loginbox input[type="text"],
input[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
}

.loginbox input[type="submit"] {
  border: none;
  outline: none;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}

.loginbox input[type="submit"]:hover {
  cursor: pointed;
  background: #ffc107;
  color: #000;
}

.loginbox a {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: darkgrey;
}

.loginbox a:hover {
  color: #ffc107;
}

.responsive {
  grid: 1 / 1;
  width: 100%;
  max-width: 400px;
  height: auto;
}

<div >
  <img src="https://cdn.houseplansservices.com/product/scne5s9p1kk12soorouhkn56dt/w800x533.jpg?v=18" alt="avatar" >
  <h2>Login Here</h2>
  <form>
    <p>Username</p>
    <input type="text" name="Username" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="Password" placeholder="Enter Password">
    <input action="RoyalReaderHomePageL.php" type="submit" name="login_button" value="Login">
    <a href="#">Forgot your password?</a><br>
    <a href="signup.php">Not a member? Sign up Now</a>
  </form>
</div>