How to align 2 forms in the same line?

Question

I'm trying to make the login view of a web page, this login view have two forms (one for register and another for login) and I want to align them and put them in the same line.

At first I've tried to use a table in order to achieve this, but this was unsuccessful, so I used some bootstrap form groups (rows and cols) but I was unsuccessful as well, in the end I managed to put them in the same line using the float attribute, but the result that I got it wasn't good enough.

<!-- THIS IS MY HTML -->

    <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:pedidos@vinilos.pe">pedidos@vinilos.pe</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>


/* THIS IS MY 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;
  }

I was trying to achieve the look of this mockup, but instead for some reason the footer comes up and it looks like this.

Possible duplicate of [Align
elements side by side](https://stackoverflow.com/questions/4938716/align-div-elements-side-by-side) — Heretic Monkey, May 27 '19 at 01:04

score 1 · Accepted Answer · answered May 27 '19 at 01:04

You haven't added your footer's display to none.

Update your CSS to this:

.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%;
  }

Here's a fiddle.

score 1 · Answer 2 · answered May 27 '19 at 03:44

You can try this. Hope this will help.

*{
 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:pedidos@vinilos.pe">pedidos@vinilos.pe</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>

score 0 · Answer 3 · answered May 27 '19 at 01:03

You can try this:

Your HTML:

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

Your CSS:

.formWrapper{
    display: flex;
}

The forms will be inline... you'll just need to put some extra style to size and position your forms.

score 0 · Answer 4 · answered May 27 '19 at 01:09

0

Since you are using bootstrap you can use the power of flex. which will remove the problem of floating and is highly flexible and customizable.`

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

  </form>

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

`

answered May 27 '19 at 01:09

DeCoder

9
2

You can use flex without bootstrap at all. – Rob May 27 '19 at 01:11
yes Rob we can use flex without bootstrap but since we are already using the framework ...why not use the utilities provided by it – DeCoder May 28 '19 at 04:43
Your first sentence implies you need bootstrap to use flex. – Rob May 28 '19 at 10:35

score 0 · Answer 5 · answered May 27 '19 at 02:03

This kind of layout you has two good options. You can use Display GRID or Display Flex. I will show an example with Flex. But i recomend the review of the all project, maybe it is better to use the GRID Display.

This is an example of structure, you do not need to follow it, but would recommend something in that 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 CSS something like this

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

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

How to align 2 forms in the same line?

5 Answers5