Css float right not woring-CodePudding

can somebody help me? I have problem with position in css. I would like to move first div to the right and second div move under it (first picture).When I use float: right for first div it looks like that these components are next to each other (second picture).

<div>
    <div>
        <button> Button 1 </button> 
        <button> Button 2 </button> 
    </div>

    <div>
        <image></image>
    </div>
</div>

Can somebody help me how css file sjhould looklike

how it should look like how it is now

CodePudding user response：

To achieve a right align, you should use a flex box to hold the button:

<div>
    <div style="width: 100%; display: flex">
        <button style="margin-left: auto;"> Button 1 </button> 
        <button> Button 2 </button> 
    </div>

    <div>
        <image></image>
    </div>
</div>

In this code, style="width: 100%; display: flex"make the div a horizontal container that occupies the whole row. margin-left: auto; on button 1 maximise the left margin of itself, hence pushing both button to the right. In this way, since the first div already occupy the whole first row, the image goes to row 2.

CodePudding user response：

.parent {
      border: 1px solid black;
      height: 300px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .nav {
      width: 100%;
    }

    .nav .menu {
      float: right;
    }

    .b-1 {
      width: 94%;
      text-align: center;
      border: 1px solid black;
    }

<!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>Document</title>
  </head>

  <body>
    <div >
      <div >
        <div >
          <button>Button 1</button>
          <button>Button 2</button>
        </div>
      </div>
      <br /><br />

      <div >
        <h2>HELLO</h2>
      </div>
    </div>
  </body>
</html>