Question 43797 in Html Question posted in
Some basic documentation can be found here.

How to make one button aligned to the left side and one to the right? – Html

I want to make it so that two buttons underneath each other are on the left side of the page, and another two buttons underneath each other, aligned with the other buttons, on the right side of the page. I tried using a <table> and I tried making two <div>s, one of them with style='align-items: left;' and one with style='align-items: right;' and this didn’t work. Is there a solution?

Tags:

3

Answers


  1. 0

    Use Flexbox (display: flex) rather than a table, to achieve this

    Create an outer div, which we will call the "container", and two inner divs, each of which will have a vertical column of two buttons.

    The container div, we need to instruct to:

    • be a flexbox
    • be arranged as a row of items (i.e. side by side)
    • put all unused space in between the items

    This will put the items at the far left and far right.

    Each of the two columns can then be a flex-box too, but you want them arranged vertically, i.e. column format.

    .flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}
    <div class="flex-container">

  <div class="flex-column">
    <button>One</button>
    <button>Two</button>
  </div>

  <div class="flex-column">
    <button>Three</button>
    <button>Four</button>
  </div>

</div>
    Login or Signup to reply.
  2. 0

    I think this could be a useful sample:

    .container{
display: flex;
justify-content: space-between;
}
.left, .right{
display: flex;
    flex-direction: column;
}
    <div class="container">
  <div class="left">
      <button> Left 1 </button>
      <button> Left 2 </button>
    </div>
    <div class="right">
      <button> Right 1 </button>
      <button> Right 2 </button>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Here I used flexbox to align two buttons to the left and right side of the screen

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        div{
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div>
        <button>Button1</button>
        <button>Button2</button>
    </div>
</body>
</html>

    First, you change the display of the parent element to display: flex;
    and then justify-content: space-between;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search