What is the best way to relocate a form to the top of the page

I am creating a website to enhance my HTML skills, and I encountered an issue with the sign-in form. Whenever I try to place an image next to the form, it automatically moves to the bottom. I have attempted using padding-top and padding-bottom but to no avail. How should I go about resolving this problem? You can view my website here: https://i.sstatic.net/EAgU5.png

Below is the code snippet:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bfa0bd">[email protected]</a>/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>

htmlcssbootstrap-5

Answer №1

Here is a possible solution:

  • Enclose the components that need to be displayed side-by-side within a div and apply flex CSS to the wrapper div
  • Assign flex-grow CSS to the children based on their layout ratios.

In addition, add elements to the container div in right-to-left order while utilizing relative positioning. The provided code snippet demonstrates this concept.

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c130c11">[email protected]</a>/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="https://joeschmoe.io/api/v1/random" 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="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 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>
    </div>
</body>
</html>

Answer №2

float: right will shift an element to the right, allowing content that comes after it to move up on its left side.

Since the form is located at the bottom of the page, there is no subsequent content following it.

When incorporating floats for layout purposes, ensure the initial element is floated, rather than the final one.

However, it is advised not to utilize floats for layout design. Despite being a popular method for manipulating webpage layouts two decades ago, floats are not intended for this purpose.

Modern alternatives such as Flexbox (for organizing rows of data) and Grid (for arranging both rows and columns of data) now exist.

It is recommended to use these newer methods instead.

Given that you have tagged this with , consider utilizing its Flexbox-based grid system which offers predefined styles for structuring content in a grid by applying classes to elements.

Answer №3

Solution

I made some adjustments to the code by adding float: left; and margin-top properties to the image tag.

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

Check out the updated layout in this image link

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6e9f6eb">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a cell break line within AG-GRID in an Angular application

I'm trying to display two sets of data in a single cell with ag-grid, but I want the data to be on separate lines like this instead: Data with break line I attempted to use "\n", "\r", and "\br" but it didn't work. Here is my code ...

javascripthtmlangulartypescriptag-grid

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

This is my first venture into the world of HTML and JavaScript, so I am asking for your patience. I am trying to incorporate the Datepicker widget from jQuery UI, following the instructions on the Getting Started page. There seems to be an issue with lin ...

javascriptjqueryhtmljquery-uijquery-ui-datepicker

Adding a Click class can cause significant disruption to the entire CSS layout

I am facing an issue with transforming the X position and appending an additional class to create a slide effect in React. It seems to be working differently compared to using vanilla JavaScript. Below is the code snippet: .inputModal { position: absolut ...

cssreactjsreact-css-modules

Encountering difficulty verifying custom-radio in bootstrap 4 using Parsley.js

I am currently using parsley for form validation on my <input> and <select> elements, and it is working perfectly. However, I am facing some issues when working with <input type="radio">. The problem is that only one option is being highl ...

htmlbootstrap-4parsley.js

How can you center the initial line of formatted text while keeping the rest left justified using just CSS?

I need help with formatting existing data without using JavaScript. The goal is to make the first line bold and centered, while the rest of the lines should be justify formatted. However, I'm having trouble achieving this as either the first line gets ...

htmlcss

What could be causing the issue of my CSS file not properly connecting with my HTML files in Django?

I am facing an issue with linking the CSS file to the HTML file in my code. Despite not showing any errors, there is no effect on my webpage. The files I have included are settings.py, base.html, and base.css. Additionally, my static folder is located outs ...

htmlcssdjango

What is the proper HTML tag and syntax used for adding a text box within the content of a webpage?

Question about HTML: How can I add a text box or block to an HTML page that is filled with plain text? I want the text box to align to the right and be surrounded by the plain text, essentially wrapping around it. I also need to specify the dimensions of ...

htmlcss

Display or conceal div elements using JavaScript

Is there a way to hide certain divs when clicking on a specific div box? Clicking on the box will trigger the hiding of some application divs. See the first image below: When the boxes are hidden, the other divs will readjust in place of the current divs ...

javascripthtmlcsstwitter-bootstrap

"Fixing index.html with the power of Bootstrap 4: A step-by

*I am facing an issue where the default bootstrap navbar style appears before my custom styles get applied every time I reload the page. Any assistance would be greatly appreciated* - Whenever I reload the page, the default bootstrap navbar style appears ...

jqueryhtmlcssbootstrap-4

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

htmlcsshtml-table

The fusion of PHP and HTML coding

I have been attempting to integrate some PHP code into a combination of HTML and I am facing some challenges. Below is the code I am working with: <?php $result = mysqli_query($db,"SELECT * FROM classes"); while($record = mysqli_fetch_array($result)) ...

phphtml

Choosing multiple options in a select tag leads to an error

I am facing an issue with my array and select multiple fields. I want all the select options to be automatically selected using the array ID when the file is loaded. Here is my array: Array( [0] => 3 [1] => 5 [2] => 9 ) This is what my select ...

phphtml

The browser is capable of detecting multiple key presses using JavaScript

I'm attempting to trigger an action when certain keys are pressed simultaneously. The keys I need to detect are bltzr, but my browser only registers bltz without the final r. I've tried this on both Windows and OSX, but still can't capture ...

javascriptjqueryhtmlkeyboardkeypress

Centering DIVs both vertically and horizontally within parent DIVs that have a height and width of 100%

I am facing a challenge with my nested parent DIVs that occupy 100% of the browser window in terms of height and width. I am struggling to center secondary DIVs inside their respective parent containers. Here are the definitions for my stacked parents: # ...

csshtml

Tips on eliminating the blue color from a hyperlink within a button

Currently, I am in the process of designing an HTML email template. I have included a green button in the template and now need to eliminate the blue color from the hyperlink within the button. I have exhaustively tried different solutions such as using ! ...

htmlcssbuttonhyperlink

Can you explain the purpose of using href="#" in web development?

I've noticed that numerous websites use links that have href="#". Can you explain what this means and how it is typically used? ...

htmlhyperlink

What is the best way to maintain the height of a background image while cropping it horizontally and resizing the browser?

My code looks like this:- HTML <div id="header-main"></div> CSS #header-main { background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/planet-bg.jpg); background-position: center; background-size ...

htmlcss

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with: The problem I'm facing involves finding the correct ...

htmlcsstwitter-bootstrap

Servlet-enhanced Turn-Based Gaming Experience

I am working on developing a turn-based game, similar to Checkers, using Servlets and JSP pages. I have set up a specific page with a newGame button that redirects players to the gamePage. This redirect sends one player to Black.jsp and the other to Red.js ...

htmljspservlets

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

javascripthtmlcss