What is the best way to line up two forms side by side?

Looking to create a login view for a webpage with two forms (one for registration and one for login) aligned side by side. Initially attempted using a table, then tried using bootstrap form groups (rows and cols) without success. Finally, aligned them in the same line using the float attribute but was not satisfied with the result.

<!-- EXAMPLE OF HTML CODE -->

    <header>
        <a href="Index.html"><img src="rsc/logo.png" class="center"></a>

        <div class="navbar1">
            <a href="#inicio">Inicio</a>
            <a href="#nuevasAdiciones">Nuevas Adiciones</a>
            <div class="dropdown1">
                <button class="dropbtn">Categoría 
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Punk</a>
                    <a href="#">Rock</a>
                    <a href="#">Emo</a>
                </div>
            </div> 
            <div class="dropdown1">
                <button class="dropbtn">Tipo de Material
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Vinilos</a>
                    <a href="#">Discos Compactos</a>
                    <a href="#">Casetes</a>
                </div>
            </div> 
            <div class="inlogin">
                    <a href="#login">Iniciar Sesión <i class="fa fa-sign-in"></i></a>
            </div>
        </div>
    </header>

    <form class="bord" style="float: left;">
        <legend>Crear Cuenta</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>

    <form class="bord" style="float: right;">
        <legend>Registrarse</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>

    <footer style="text-align: center;">
        <p><strong>Contacto</strong></p>
        <p>Email: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80f0e5e4e9e4eff3c0f6e9eee9eceff3aef0e5">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4b4a1a0ada0abb784b2adaaa8ab94c3a1a7">[email protected]</a></a></p>
        <p>Teléfono: 3291177</p>
        <p><a href="https://www.facebook.com/vinilos.pe/" target="_blank"><i class="fa fa-facebook-square" style="font-size:40px;color: #3b5998;"></i></a></p>
        <p>Vinilos.Pe &copy; 2019 Derechos Reservados</p>
    </footer>



/* STYLING IN CSS */

.bord { 
    display: block;
    margin-top: 15px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-style: solid;
    border-width: 2.5px;
    text-align: center;
}

While aiming for a design similar to this mockup, encountered footer alignment issues resulting in a layout like this.

htmlcss

Answer №1

Your footer's display property has not been set to none.

To fix this, update your CSS code as follows:

.bord { 
    display: block;
    margin-top: 15px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-style: solid;
    border-width: 2.5px;
    text-align: center;
  }
  footer{;
    display:inline-block;
    width:100%;
  }

Check out the working example on this fiddle.

Answer №2

Give this a shot, it might be beneficial.

*{
margin: 0px;
padding: 0px;
}
.form{
width: 100%;
margin: 0 auto;
}
.bord { 
    display: inline-block;
    margin-top: 15px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-style: solid;
    border-width: 2.5px;
    text-align: center;
    width: 45%;
  }
  footer{;
    display:inline-block;
    width:100%;
  }
    <header>
        <a href="Index.html"><img src="rsc/logo.png" class="center"></a>

        <div class="navbar1">
            <a href="#inicio">Inicio</a>
            <a href="#nuevasAdiciones">Nuevas Adiciones</a>
            <div class="dropdown1">
                <button class="dropbtn">Categoría 
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Punk</a>
                    <a href="#">Rock</a>
                    <a href="#">Emo</a>
                </div>
            </div> 
            <div class="dropdown1">
                <button class="dropbtn">Tipo de Material
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Vinilos</a>
                    <a href="#">Discos Compactos</a>
                    <a href="#">Casetes</a>
                </div>
            </div> 
            <div class="inlogin">
                    <a href="#login">Iniciar Sesión <i class="fa fa-sign-in"></i></a>
            </div>
        </div>
    </header>

<div class="form">
    <form class="bord" style="">
        <legend>Crear Cuenta</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>

    <form class="bord" style="">
        <legend>Registrarse</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>
</div>
    <footer style="text-align: center;">
        <p><strong>Contacto</strong></p>
        <p>Email: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e4e5b5a575a514d7e4857505752514d104e5b">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b1a4a5a8a5aeb281b7a8afa8adaeb2efb1a4">[email protected]</a></a></p>
        <p>Teléfono: 3291177</p>
        <p><a href="https://www.facebook.com/vinilos.pe/" target="_blank"><i class="fa fa-facebook-square" style="font-size:40px;color: #3b5998;"></i></a></p>
        <p>Vinilos.Pe &copy; 2019 Derechos Reservados</p>
    </footer>

Answer №3

One way to achieve this is by following these steps:

Your initial HTML code looks like this:

<div class="formWrapper">
    <form>First Form</form>
    <form>Second Form</form>
</div>

Next, add the following CSS style:

.formWrapper{
    display: flex;
}

By doing this, the forms will be displayed inline. You may need to adjust the styling further in order to properly size and position your forms as needed.

Answer №4

If you're utilizing bootstrap, harness the power of flex to eliminate floating issues and create a highly adaptable and customizable layout.`

<div class="flex">
  <form class="loginform d-block">

  </form>

  <form class="signupform d-block"></form>
</div>

`

Answer №5

When it comes to layout options, you have two good choices. You can either utilize Display GRID or Display Flex. I will demonstrate an example using Flex, but I suggest reviewing the entire project as using GRID Display may be more beneficial.

This structure provided is just an example for reference, feel free to deviate from it but consider something similar in style.

<body class="container">
    <div class="content">
        <header class="content__header">
            ...
        </header>
        <div class="content__body">
            <div class="form-content">
                <form class="form form--register"></form>
            </div>
            <div class="form-content">
                <form class="form form--singup"></form>
            </div>
        </div>
        <footer class="content__footer">
            ...
        </footer>
    </div>
</body>

For the CSS styling, consider something like this:

.content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.content__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

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

Preventing clashes in namespaces while incorporating Bootstrap into a plugin for WordPress

After creating a WordPress plugin, I am considering revamping its layout with the help of bootstrap CSS and js. However, I have encountered issues in the past due to conflicting CSS naming conventions. I want to ensure that there are no namespace conflicts ...

csswordpresstwitter-bootstrapplugins

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

Why is my column getting devoured even though it has custom content tailored to it?

In my layout, I have one column, one row, and three nested columns. Each column contains a custom-designed button instead of using the default Bootstrap button. However, there seems to be an issue where one of the columns is getting cut off. To better und ...

htmlcsstwitter-bootstrap

What is the best way to add the SO-style <kbd> effect to my presentation made with HTML?

I'm currently utilizing reveal.js to construct an HTML-based presentation. My goal is to incorporate keyboard symbols like the ones found on SO and Github using the <kbd>SPACE</kbd> syntax, resulting in this glyph: SPACE. Despite attempti ...

htmlmarkdownreveal.js

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

cssreactjsmaterial-ui

Using HTML and JavaScript to automatically update one input date based on changes made to another

Currently, I am developing an Angular application and encountered a challenge with two date input fields: <div class="col-lg-3"> <div> {{ dataInizioLabel }} </div> <input required type="datetime-local" ...

javascripthtmlangular

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

htmlangulartypescript

Is there a way to apply an event function after adding elements through append?

When I click the button, a div is appended inside the body. However, I am trying to make it so that when I click on this newly appended div, an alert message pops up. I have tried implementing this with a highlighted area, but have been unsuccessful. How c ...

javascriptjqueryhtml

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

I am facing a challenge with multiple tags structured like this: <div class="A"> <div class="B1">...</div> <div class="C1">Hello World!</div> <div class="C2">World Hell ...

javascriptcss

Switching icon with jQuery upon clicking

I'm just starting to learn jQuery and I'm working on changing the font icon class when clicked to display a drop down. Right now, it changes the icon and drops down the content as expected. However, I'm facing an issue where I want the icon ...

javascriptjqueryhtmlcssfont-awesome

Click the button to automatically generate a serial number on the form

My form includes three input fields: sl no, stationerytype, and stationeryqty. By clicking the symbols + and -, I can add or delete these fields. I am attempting to automatically generate a Sl no in the sl no field when I click the plus symbol, and adjust ...

javascriptphphtml

Tips for adjusting the size and positioning the ng bootstrap carousel in the center

My Angular project is using ng bootstrap, but I'm facing a styling issue. The content doesn't display in the center, rather it appears in the upper left corner: example I would like the content to be centered and wide under the blue headbar. W ...

cssangularbootstrap-5ng-bootstrap

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

javascriptjquerycss

The information is not appearing in the dropdown menu

The select tag for chapters is not displaying the result from the query properly. Instead of showing in the select tag, the chapter names are being displayed as echo statements. <!doctype html> <html> <head> <meta charset="utf-8"> ...

javascriptphphtmlsqlselect

The Javascript navigation bar is not displaying properly on mobile devices as it should

After customizing the responsive navbar tutorial from W3Schools using CSS and JS, I encountered an issue. I wanted to include a logo and a web page title before the navbar, which worked perfectly when the webpage was maximized. However, when I resized the ...

javascripthtmlcssresponsive-design

Save hyperlinks provided by users within the text

Users have the ability to create a post and leave a comment. I am aiming to give my users the option to include a hyperlink in their comment, such as: "This is a comment where aboutme is a hyperlink." I am unsure of how to store this hyperlink. Currently, ...

phphtmlmysqllaravel

Reveal Content once you give us a thumbs up on Facebook

Is there HTML/PHP code that can display specific content only after a user clicks the "Like" button on an external website, not an app? ...

phphtmlfacebookfacebook-like

Styling with CSS: Proper alignment of elements within a div container

I'm struggling with positioning three elements within a div. The left element needs to be on the left, the middle element centered, and the right element on the right. Here's what I have so far in my CSS: #left-element { margin-left: 9px; ...

csspositioninghtml

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

csscss-selectors

Using canvas to smoothly transition an object from one point to another along a curved path

As a beginner in working with canvas, I am facing a challenge of moving an object from one fixed coordinate to another using an arc. While referring to the code example of a solar system on https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutori ...

javascripthtmlcanvas