How to make an object line up below to the right

user_11805611 0
Viewed 82

I'm quite new to CSS. I have this text box that is dynamically aligned using flex. Then a button underneath. The button is stuck to the left of the text box.

But I want it to align to the right edge of the text box. I've tried to use various alignments in .form-buttons to push the button right, but it seems stuck. I'm not sure if it's the way I've nested the html elements.

.search_btn {
  width: 200px;
  padding: 10px;
  background-color: black;
  color: white;
  border: 0;
}

.search_btn:hover {
  box-shadow: 1px 1px 1px grey;
}

input {
  padding: 5px;
}

.search_section {
  padding-top: 10px;
  padding-bottom: 10px;
}

.search_options {
  padding-bottom: 10px;
}

.row {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}

.left_label {
  flex-basis: 20%;
}

.txt_box {
  margin: 0;
  flex-basis: 80%;
}

.form-buttons {
  margin-left: left;
}
<form action="/action_page.php">
  <div class="search_section">
    <div class="search_options">
      <h3 class="tit_label" for="fname">Alignment:</h3>

      <div class="row">
        <label class="left_label" for="fname">aligns left:</label>
        <input class="txt_box" type="text" id="fname" name="fname" />
      </div>


    </div>
    <div class="form-buttons">
      <input class="search_btn" type="submit" value="aligns below to the right" />
    </div>
</form>

flexbox css html
3 Answers

A simple float:right; on the .search_btn class could do the trick for you:

 .search_btn {
  width: 200px;
  padding: 10px;
  background-color: black;
  color: white;
  border: 0;
  float:right;
}

You might find more options here: Align button to bottom right of form

user_38425980

You're almost there. You could push the button to the right by simply changing the margin-left property to auto and restricting the width to max-content (both for .form-buttons). Like this:

.form-buttons {
  margin-left: auto;
  width: max-content;
}


.search_btn {
  width: 200px;
  padding: 10px;
  background-color: black;
  color: white;
  border: 0;
}

.search_btn:hover {
  box-shadow: 1px 1px 1px grey;
}

input {
  padding: 5px;
}

.search_section {
  padding-top: 10px;
  padding-bottom: 10px;
}

.search_options {
  padding-bottom: 10px;
}

.row {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}

.left_label {
  flex-basis: 20%;
}

.txt_box {
  margin: 0;
  flex-basis: 80%;
}

.form-buttons {
  width: max-content;
  margin-left: auto;
}
<form action="/action_page.php">
  <div class="search_section">
    <div class="search_options">
      <h3 class="tit_label" for="fname">Alignment:</h3>

      <div class="row">
        <label class="left_label" for="fname">aligns left:</label>
        <input class="txt_box" type="text" id="fname" name="fname" />
      </div>


    </div>
    <div class="form-buttons">
      <input class="search_btn" type="submit" value="aligns below to the right" />
    </div>
</form>

user_114093210

You can use this:

.form-buttons{
    display: flex;
    justify-content: flex-end;
}


<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .search_btn {
      width: 200px;
      padding: 10px;
      background-color: black;
      color: white;
      border: 0;
    }
    
    .search_btn:hover {
      box-shadow: 1px 1px 1px grey;
    }
    
    input {
      padding: 5px;
    }
    
    .search_section {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    
    .search_options {
      padding-bottom: 10px;
    }
    
    .row {
      display: flex;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    
    .left_label {
      flex-basis: 20%;
    }
    
    .txt_box {
      margin: 0;
      flex-basis: 80%;
    }
    
    .form-buttons {
      display: flex;
      justify-content: flex-end;
    }
  </style>
</head>

<body>

  <form action="/action_page.php">
    <div class="search_section">
      <div class="search_options">
        <h3 class="tit_label" for="fname">Alignment:</h3>

        <div class="row">
          <label class="left_label" for="fname">aligns left:</label>
          <input class="txt_box" type="text" id="fname" name="fname" />
        </div>


      </div>
      <div class="form-buttons">
        <input class="search_btn" type="submit" value="aligns below to the right" />
      </div>
    </div>
  </form>
</body>

</html>

user_124152870
Related