CODEWITHSUNDEEP
htmlcss
neevjs
neevjs

Reputation: 85

Aligning a button and a input at same place html

I am trying to align my button and message input on the bottom of my page. I am using margin-left and top. My Problem is I am not able to align both of them on the exact same place. I tried using position and align-items. Here's a picture of my app: enter image description here

Code:

.name-input {
    width: 800px;
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: 250px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.message-input {
    width: 800px;;
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: 250px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 470px;
}

.send-button {
    background-color: #4CAF50;
  border: none;
  color: white;
  width: 100px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;;
  margin-left: 1200px;
  margin-bottom: 10px;
}

.clients-total{
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="style.css" />
    <title>Chat app</title>
  </head>
    <div class="main">
      <div class="name">
        <span><i class="far fa-user"></i></span>
        <input
          type="text"
          id="name-input"
          class="name-input"
          placeholder="Your Name Here"
          maxlength="20"
        />
      </div>

      <ul class="message-container" id="message-container">
      </ul>

      <form class="message-form" id="message-form">
        <input
          type="text"
          name="message"
          id="message-input"
          class="message-input"
          placeholder="Your message here"
        />
        <div class="v-divider"></div>
        <h3 class="clients-total" id="client-total">Total clients: 2</h3>
        <button type="submit" class="send-button" id="send-button">
          send <span><i class="fas fa-paper-plane"></i></span>
        </button>
      </form>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/moment.min.js"
      integrity="sha512-Q1f3TS3vSt1jQ8AwP2OuenztnLU6LwxgyyYOG1jgMW/cbEMHps/3wjvnl1P3WTrF3chJUWEoxDUEjMxDV8pujg=="
      crossorigin="anonymous"
    ></script>
    <script src="main.js"></script>
  </body>
</html>

Pls comment down if you want to make any imporvements on this post. Thanks in advance.

Upvotes: 3

Views: 66

Answers (2)

Alexis Garcia
Alexis Garcia

Reputation: 472

Copy to your HTML file and see it in the browser. You need media queries to be responsive.

      .name-input {
    width: 800px;
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: 250px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.message-input {
    width: 800px;;
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: 250px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 470px;
}

.send-button {
    background-color: #4CAF50;
  border: none;
  color: white;
  width: 100px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 30px;
}

.clients-total{
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}
    <div class="main">
      <div class="name">
        <span><i class="far fa-user"></i></span>
        <input
          type="text"
          id="name-input"
          class="name-input"
          placeholder="Your Name Here"
          maxlength="20"
        />
      </div>

      <ul class="message-container" id="message-container">
      </ul>

      <form class="message-form" id="message-form">
        <input
          type="text"
          name="message"
          id="message-input"
          class="message-input"
          placeholder="Your message here"
        />
           
          <button type="submit" class="send-button" id="send-button">
          send <span><i class="fas fa-paper-plane"></i></span>
        </button>
        <h3 class="clients-total" id="client-total">Total clients: 2</h3>

      </form>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/moment.min.js"
      integrity="sha512-Q1f3TS3vSt1jQ8AwP2OuenztnLU6LwxgyyYOG1jgMW/cbEMHps/3wjvnl1P3WTrF3chJUWEoxDUEjMxDV8pujg=="
      crossorigin="anonymous"
    ></script>
    <script src="main.js"></script>
  </body>
</html>

Upvotes: 0

Mohamed Zahour
Mohamed Zahour

Reputation: 338

You must not leave the button in another div. The Button should be beside the label. Like this:

<input id="message-input">
<button>Submit</button>

Upvotes: 1

Related Questions