CODEWITHSUNDEEP
htmlcss
Jonathan Fernandez
Jonathan Fernandez

Reputation: 47

HTML+CSS: How do I put this 2 buttons at the same level vertically

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: enter image description here

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

Upvotes: 1

Views: 1312

Answers (2)

Andy Hoffman
Andy Hoffman

Reputation: 19109

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

Upvotes: 1

Mark Rabjohn
Mark Rabjohn

Reputation: 1713

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

Upvotes: 0

Related Questions