How to move a form to top?-CodePudding

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  style="background-color: #000029 ;">
                <div >
                  <img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
                  <form >
                    <button  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  >
                  <label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" >User Id</label>
                  <div >
                    <input type="email"  id="inputEmail3">
                  </div>
                </div>
                <div >
                  <label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" >Password</label>
                  <div >
                    <input type="password"  id="inputPassword3">
                  </div>
                </div>
                <button type="submit" style="font-family: 'Roboto', sans-serif; " >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>

CodePudding user response：

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).

CodePudding user response：

One solution can be :

Wrap the components that have to appear side-by-side into a div and apply flex CSS to the wrapper div
Add flex-grow CSS to the children according to the layout ratios.

Plus, add elements to the container div in right to left order, while using relative positioning. The following solution does the same.

<!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  style="background-color: #000029 ;">
                <div >
                  <img src="https://joeschmoe.io/api/v1/random" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
                  <form >
                    <button  style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
                  </form>
                </div>
              </nav>
        </div>
        <div style="display: flex">
            <div style="width: 600px; flex-grow: 1">
                <img src="https://joeschmoe.io/api/v1/random" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
            </div>

            <div style="border-left: 3px solid #1f1f1f; height: 500px; position: relative; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;">
            </div>

            <div style="width: 600px; float: right; flex-grow: 1; margin-left: 50px; margin-top: 100px;">
            <form style="width: 600px; padding-right: 100px;  " >
                <div  >
                  <label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" >User Id</label>
                  <div >
                    <input type="email"  id="inputEmail3">
                  </div>
                </div>
                <div >
                  <label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" >Password</label>
                  <div >
                    <input type="password"  id="inputPassword3">
                  </div>
                </div>
                <button type="submit" style="font-family: 'Roboto', sans-serif; " >Sign in</button>
              </form>
            </div>
        </div>
    </div>
</body>
</html>

CodePudding user response：

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  >
                  <label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" >User Id</label>
                  <div >
                    <input type="email"  id="inputEmail3">
                  </div>
                </div>
                <div >
                  <label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" >Password</label>
                  <div >
                    <input type="password"  id="inputPassword3">
                  </div>
                </div>
                <button type="submit" style="font-family: 'Roboto', sans-serif; " >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  style="background-color: #000029 ;">
                <div >
                  <img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
                  <form >
                    <button  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  >
                  <label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" >User Id</label>
                  <div >
                    <input type="email"  id="inputEmail3">
                  </div>
                </div>
                <div >
                  <label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" >Password</label>
                  <div >
                    <input type="password"  id="inputPassword3">
                  </div>
                </div>
                <button type="submit" style="font-family: 'Roboto', sans-serif; " >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>