making form inline with a picture in a row

Question

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 class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
        <div class="ds-userlogin">
          <div class="account-box">
            <div class="picture_account"><img src="https://via.placeholder.com/200.jpg" class="imgFormat" /></div>
            <div class="account-box-content">
              <form method="post" class="form-account form-inline ">
                <div class="form-account-title">
                  <input type="text" style="border:solid" id="FullName">
                  <label for="email-phone">Fullname</label>
                </div>

                <div class="form-account-title">
                  <input type="password" style="border:solid" id="Password">
                  <label for="password">Password</label>
                </div>
                <div class="form-row-account">
                  <a onclick="Registeruser()" class="btn btn-primary btn-register">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?

Answer 1

.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;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-account-box .ds-userlogin .account-box .picture_account {
  display: inline;
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}

.page-account-box .ds-userlogin .account-box .account-box-content {
  width: 100%;
  max-width: 250px;
  margin-right: auto;
  padding: 15px;
  text-align: center;
  border-radius: 20px;
  display: inline;
}
.page-account-box .ds-userlogin .account-box .account-box-content form {
  width: 100%;
}
.page-account-box
  .ds-userlogin
  .account-box
  .account-box-content
  form
  .form-account-title {
  width: 100%;
  margin: 0 0 10px 0;
}
.page-account-box
  .ds-userlogin
  .account-box
  .account-box-content
  form
  .form-account-title
  input {
  width: 100%;
}

<!-- 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 class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
        <div class="ds-userlogin">
          <div class="account-box">

            <div class="account-box-content">
              <form method="post" class="form-account form-inline ">
                <div class="form-account-title">
                  <input type="text" style="border:solid" id="FullName">
                  <label for="email-phone">Fullname</label>
                </div>

                <div class="form-account-title">
                  <input type="password" style="border:solid" id="Password">
                  <label for="password">Password</label>
                </div>
                <div class="form-row-account d-flex justify-content-center w-100">
                  <a onclick="Registeruser()" class="btn btn-primary btn-register">Register </a>
                </div>
              </form>
            </div>
            <div class="picture_account"><img src="https://via.placeholder.com/200.jpg" class="imgFormat" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

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 class="account-box row">
  <div class="account-box-content col">
    <form method="post" class="form-account form-inline ">
      <div class="form-account-title">
        <input type="text" style="border:solid" id="FullName">
        <label for="email-phone">Fullname</label>
      </div>
      <div class="form-account-title">
        <input type="password" style="border:solid" id="Password">
        <label for="password">Password</label>
      </div>
      <div class="form-row-account">
        <a onclick="Registeruser()" class="btn btn-primary btn-register">Register  </a>
      </div>
    </form>
  </div>
  <div class="picture_account col">
    <img src="https://via.placeholder.com/200.jpg" class="imgFormat" />
  </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.

Answer 3

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/