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

Could a complex, intricate clipping path be created using CSS 3?

Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...

htmlcss

What is the process for implementing the tooltip plugin within a modal dialog in Twitter Bootstrap?

Hello there, I am currently using the latest version of Bootstrap, v2.1.1. I am trying to implement a tooltip in my modal dialog. <!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap v2.1.1</title> <meta htt ...

htmltwitter-bootstraptooltipmodal-dialog

What is the origin of the character?

Currently running a string test. When I obtain the innerHTML, there are unexpected u'\n and \n', AssertionError: u'\n<p><strong>The user/password code entered is incorrect!</strong></p>\n' != ...

pythonhtmlselenium

A step-by-step guide on using Javascript to transform images into text

Hey there! I'm looking for some help to convert an image into text. The idea is that when someone uploads an image and hits the "Submit" button, the text from the image should display in a textarea below. However, the code I've been working on do ...

javascripthtmltesseract.js

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expe ...

cssnode.jsexpresssasspug

How can I establish the conversion from pixels to em units?

According to a source I found, 1 em is equivalent to 16px. You can read more about it here. Despite setting the font-size to 100% in the body and using font-size: 1em, the standard font size in my Jekyll site remains 12px. Curious? Visit my Jekyll site a ...

htmlcssjekyll

Incorrect outcome when utilizing ajax to update a div within a for each loop

For a while now, I've been facing an issue with a div and form within a forEach loop. When one of the forms in the loop is submitted, the content inside the corresponding div is updated in the database and refreshed using JavaScript and Ajax. The upda ...

javascriptphpjqueryhtmlajax

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

htmlcsstwitter-bootstrapdatatables

Steps for inserting an additional header in an Angular table

https://i.stack.imgur.com/6JI4p.png I am looking to insert an additional column above the existing ones with a colspan of 4, and it needs to remain fixed like a header column. Here is the code snippet: <div class="example-container mat-elevation-z8"> ...

javascripthtmlangular

Polyfill for the :nth-column CSS4 Grid-Structural pseudo-class

In my CSS grid layout, I want to include a margin in every even column. While the :nth-column pseudo-class would be ideal for this, it unfortunately won't be supported in the near future. Could anyone recommend any polyfills that I could utilize, or ...

csscss-selectorscss-gridpseudo-classpolyfills

Data binding functions properly only when utilizing the syntax within the select ng-options

In the book AngularJS in Action, I came across this Angular controller: angular.module('Angello.Storyboard') .controller('StoryboardCtrl', function() { var storyboard = this; storyboard.currentStory = null; ...

javascripthtmlangularjs

Updating Sencha list itemTpl on the fly

Is there a way to dynamically change the itemTpl in a Sencha list to adjust the visibility of a column based on certain conditions? Your assistance would be greatly appreciated. ...

javascripthtmllistcsssencha-touch

Eliminate any undefined data in the popup map of Javascript

I am working with JSON data that is being displayed in a pop-up on a map. In cases where there is missing data (Visibility), the word undefined appears in the pop-up. Is there a way to remove the undefined text so that it does not show up in the pop-up? ...

javascripthtmlcssjson

Using CSS3 to Display Box-Shadow Behind Adjacent Div Element

I have implemented the following: box-shadow: 0px -1px 0px #333333; However, on my footer, it seems to be obscured or disappearing when there is another div preceding it. It's a bit difficult to explain, but you can see what I mean in this screensho ...

css

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior diffe ...

javascripthtmlvideo

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

htmlcssangular

Can Angular's built-in internationalization features be used to translate bindings?

Challenge The task at hand involves integrating translations into an Angular 6 application to support static text in multiple languages. The objective is to have the ability to choose a language during the build process without requiring dynamic translati ...

javascripthtmlangularinternationalizationangular-i18n

Struggling to maintain the footer at the bottom of the page

I've been working hard to implement the tips from a tutorial on keeping the footer at the bottom of the page, especially when there isn't much content. The link to the tutorial can be found here: Despite following all the guidelines and properti ...

htmlcssfooter

Show the file name in the email signature instead of displaying the image

I'm facing a unique challenge with images in my HTML email signature. Sometimes the images are replaced by their file names on certain email hosts. Interestingly, I can't replicate this error now as the images are displaying correctly again! He ...

htmlcssimageemail

How to send parameters to Bootstrap modal using a hyperlink

I need help confirming the deletion of a datatable row using a Bootstrap modal dialog. When a user clicks on the delete link, I want a modal to appear asking for confirmation. Here is my code: <c:forEach items="${equipes}" var="equ"> ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal