making form inline with a picture in a row

user_1379478 0
Viewed 145

I want to do something like this enter image description here

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 enter image description here how can I make the forms be inline with the picture?

bootstrap-4 css html
3 Answers

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.

user_141905430

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/

user_182958940 

.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>

user_99073340
Related