Styjun

I want to align those two buttons (Login and Registrar) at the same level but as they are different forms "Registrar" button is being placed on the "next line".

Here is the issue, visually:

Here is the code:

HTML

<section class="header_form_login">
 <form action="index2.html" method="GET">
 <label for="user">Usuario:<br></label>
 <input type="text" id="user" name="user_input">
 <label for="pass"><br>Contraseña:<br></label>
 <input type="text" id="pass" name="pass">
 <input type="submit" id="login" value="Login">
 </form>
 <form action="registro.html" method="GET">
 <input type="submit" id="register" value="Registrar">
 </form>
</section>

CSS:

header > section.header_form_login
 font-weight: 500;
 align-items: right;
 padding: 5px;
 margin: auto;
 margin-right: 20px;


header > section.header_form_login > form > input#user
 width: 200px;
 height: 24px;
 border: 1px solid lightgray;


header > section.header_form_login > form > input#pass
 width: 200px;
 height: 24px;
 border: 1px solid lightgray;


 /* BUTTONS */
 header > section.header_form_login > form > input#login
 border: none;
 background-color: #CAB99F;
 color: black;
 font-weight: 500;
 font-family: 'Roboto';
 font-size: 15px;
 text-decoration: none;
 padding: 10px 20px;
 cursor: pointer;
 display: block;
 margin-top: 10px;
 

 header > section.header_form_login > form > input#register
 border: none;
 background-color: #CAB99F;
 color: black;
 font-weight: 500;
 font-family: 'Roboto';
 font-size: 15px;
 text-decoration: none;
 padding: 10px 30px;
 cursor: pointer;
 display: flex;
 float: right;
 margin-top: 10px;
 

Thanks a lot!!!

PD: Feel free to give me recommendations, I'm kinda new to html and css coding.

I need help with html and css, specifically, with buttons being placed at the same level vertically but from different forms

Update: Refactored CSS to share styles.

I would restructure your HTML and fix your CSS to get things working properly. Also, when using ids, they are meant to be unique, so there's no need for a long lookup query such as:

header > section.header_form_login > form > input#login … 

Just use

#login … 

To make the "buttons" align, I made the register input a link. This is pretty standard. Then I added some CSS to align these elements on the same line.

.form-buttons 
 display: flex;
 flex-wrap: nowrap;

Here is how I could restructure your markup and styles.

* 
 box-sizing: border-box;


body 
 margin: 0;


.header_form_login 
 font-weight: 500;
 padding: 5px;
 margin: auto;
 width: 250px;
 max-width: 100%;


#user,
#pass 
 width: 100%;
 padding: 5px;
 border: 1px solid lightgray;


/* BUTTONS */

#login,
#register 
 border: none;
 background-color: #CAB99F;
 color: black;
 font-weight: 500;
 font-family: 'Roboto';
 font-size: 15px; 
 text-decoration: none;
 padding: 10px 20px;
 cursor: pointer; 
 text-align: center;
 flex: 1; 


#login 
 margin-right: 2.5px; 


#register 
 margin-left: 2.5px;


.form-buttons 
 padding-top: 10px;
 display: flex;
 flex-wrap: nowrap;

<section class="header_form_login">
 <form action="index2.html" method="GET">
 <label for="user">Usuario:<br></label>
 <input type="text" id="user" name="user_input">
 <label for="pass">Contraseña:</label>
 <input type="text" id="pass" name="pass">
 <div class="form-buttons">
 <input type="submit" id="login" value="Login">
 <a href="registro.html" id="register">Register</a>
 </div>
 </form>
</section>

jsFiddle

I don't generally like there being two forms in the same place to drive 2 actions. Assuming that you don't need username and password sending to your register page, then I would implement as follows:

<section class="header_form_login">
 <form action="index2.html" method="GET">
 <label for="user">Usuario:<br></label>
 <input type="text" id="user" name="user_input">
 <label for="pass"><br>Contraseña:<br></label>
 <input type="text" id="pass" name="pass">
 <input type="submit" id="login" value="Login">
 <a href="registro.html" id="register" title="Registrar">Registrar</a>
 </form>
</section>

CSS for Buttons:

/* BUTTONS */
header > section.header_form_login > form > input#login
 border: none;
 background-color: #CAB99F;
 color: black;
 font-weight: 500;
 font-family: 'Roboto';
 font-size: 15px;
 text-decoration: none;
 padding: 10px 20px;
 cursor: pointer;
 display: inline-block;
 margin-top: 10px;


header > section.header_form_login > form > input#register
 border: none;
 background-color: #CAB99F;
 color: black;
 font-weight: 500;
 font-family: 'Roboto';
 font-size: 15px;
 text-decoration: none;
 padding: 10px 30px;
 cursor: pointer;
 display: inline-block;
 margin-top: 10px;