'How to move a form to top?

I am making a website for learning purposes in HTML with a sign-in form but, when I put an image near the form the form moved to the bottom. I tried padding-top, padding-bottom nothing is helping how do I resolve this issue? My website :

Here's my code:

<!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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="App.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
    <div>
        <div>
            <nav class="navbar navbar-light " style="background-color: #000029 ;">
                <div class="container-fluid">
                  <img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
                  <form class="d-flex">
                    <button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
                  </form>
                </div>
              </nav>
        </div>
        <div style="width: 600px;">
          <img src="House real estate logo template.png" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
      </div>
        <div style="width: 600px; float: right;">
            <form style="width: 600px; padding-right: 100px;  " >
                <div class="row mb-3" >
                  <label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
                  <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3">
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3">
                  </div>
                </div>
                <button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
              </form>
        </div>
        <div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
        
    </div>
</body>
</html>

html css bootstrap-5

Solution 1:^[1]

float: right will move an element to the right and let content that follows it bubble up to its left.

The form is at the end of the page, so there is nothing that follows it.

When using floats for layout, you need to float the first element and not the last element.

That said, do not use floats for layout. They aren't designed for it even if they where the best thing CSS had for hacking a layout into a webpage 20 years ago.

We now have Flexbox (for organising rows of data) and Grid (for organising rows + columns of data).

Use those instead.

Since you have tagged this bootstrap-5, you might want to use its Flexbox based grid system (where it has some predefined styles for laying out content in a grid that you apply by adding classes to the elements).

Solution 2:^[2]

Solution

I have added float: left; at tag where hope image is there and added margin-top property .

<div style="width: 600px; float: left; ">
          <img src="img.jpg"  style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;"   alt="Hope">
        </div>
        <div style="width: 600px; float: right; margin-top: 200px;" >
            <form style="width: 600px; padding-right: 100px;  " >
                <div class="row mb-3" >
                  <label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
                  <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3">
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3">
                  </div>
                </div>
                <button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
              </form>
        </div>

You Can Check My Output In Image

<!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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="App.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
    <div>
        <div>
            <nav class="navbar navbar-light " style="background-color: #000029 ;">
                <div class="container-fluid">
                  <img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
                  <form class="d-flex">
                    <button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
                  </form>
                </div>
              </nav>
        </div>
        <div style="width: 600px; float: left; ">
          <img src="https://i.ibb.co/Vg1Jyfz/images.jpg"  style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;"   alt="Hope">
        </div>
        <div style="width: 600px; float: right; margin-top: 200px;" >
            <form style="width: 600px; padding-right: 100px;  " >
                <div class="row mb-3" >
                  <label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
                  <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3">
                  </div>
                </div>
                <div class="row mb-3">
                  <label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3">
                  </div>
                </div>
                <button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
              </form>
        </div>
        <div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
        
    </div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Quentin
Solution 2

'How to move a form to top?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]