making form inline with a picture in a row-CodePudding

I want to do something like this

So I did the following

.page-account-box {
  width: 100%;
  margin-top: 70px;
}

.page-account-box .ds-userlogin .account-box {
  width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid #e2efef;
  position: relative;
  margin: 70px auto 30px;
  display: table;
  background: #fff;
  border-radius: 20px;
}

.page-account-box .ds-userlogin .account-box .picture_account {
  display: inline;
  width: 50%;
}

.page-account-box .ds-userlogin .account-box .account-box-content {
  min-height: 50%;
  padding: 15px 30px;
  text-align: center;
  border-radius: 20px;
  display: inline;
}

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div ><img src="https://via.placeholder.com/200.jpg"  /></div>
            <div >
              <form method="post" >
                <div >
                  <input type="text" style="border:solid" id="FullName">
                  <label for="email-phone">Fullname</label>
                </div>

                <div >
                  <input type="password" style="border:solid" id="Password">
                  <label for="password">Password</label>
                </div>
                <div >
                  <a onclick="Registeruser()" >Register  </a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

but the result would be like this how can I make the forms be inline with the picture?

CodePudding user response：

how can I make the forms be inline with the picture?

Remove your CSS and in your HTML replace account-box:

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div >
  <div >
    <form method="post" >
      <div >
        <input type="text" style="border:solid" id="FullName">
        <label for="email-phone">Fullname</label>
      </div>
      <div >
        <input type="password" style="border:solid" id="Password">
        <label for="password">Password</label>
      </div>
      <div >
        <a onclick="Registeruser()" >Register  </a>
      </div>
    </form>
  </div>
  <div >
    <img src="https://via.placeholder.com/200.jpg"  />
  </div>
</div>

The class of row to turn the container holding your image and form into a row, and the class of col on both your form and image to put them on separate columns. Also your image is now below the form in the markup so it appears on the left visually.

CodePudding user response：

You can try adding the following to your account-box-content class:

 float: left;

Here's a fiddle you can see it working on: https://jsfiddle.net/gx3y8ksc/