I'm making a simple website editor, and I need to align 2 buttons on the right side of a text area, like this: (with the "clear" and "go" being buttons).

I am thinking of using divs to enclose the buttons, but I've tried it and it doesn't work.

Also, I am trying to avoid using absolute positioning because it'll be a pain to manage in my case.

I am new to css positioning, so if you need to make changes feel free to suggest how I can inprove.

Edit: here's what I've tried:

<img src = "https://picsum.photos/200/200"></img>
<button style = "display: inline-block; vertical-align: top;">test1</button>
<button style = "display: inline-block; vertical-align: top;">test2</button>

I've tried grid layout, but that's not working because of the way that sizes are dealt with, and it doesn't go furthest back. The problem with the code is that they don't break to next line, if it does it skips to below the image. I think the reason is because each line is one element only. Using divs for it has the same result: one line for the image.

CodePudding user response：

A fairly straightforward way to start with a small grid like this is to define the grid template areas.

Each area is given a name and you lay it out horizontally and vertically.

For example, to get your first element to take twice the vertical space of the second two you can set:

  grid-template-areas:
    'first second'
    'first third';

(the areas can be called anything you like)

So here it is applied to your code:

.grid-container> :nth-child(1) {
  grid-area: first;
}

.grid-container> :nth-child(2) {
  grid-area: second;
}

.grid-container> :nth-child(3) {
  grid-area: third;
}

.grid-container {
  width: min(300px, 100vw);
  display: grid;
  grid-template-areas: 'first second' 'first third';
  grid-gap: min(10px, 1vw);
}

<div class="grid-container">
  <img src="https://picsum.photos/200/200"></img>
  <button>test1</button>
  <button>test2</button>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Flexbox to the rescue

.wrapper,
.btn-wrapper {
  display: flex;
}

textarea {
  border: 2px solid black;
  margin-right: .1rem;
  height: 100%;
}

.btn-wrapper {
  flex-direction: column;
}

button {
  border: 2px solid black;
  background-color: white;
}

<div class="wrapper">
  <div>
    <textarea cols="10"></textarea></div>
  <div>
    <div class="btn-wrapper">
      <button>clear</button>
      <button>go</button>
    </div>
  </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>