aligning a form next to an image side by side

I found this amazing design https://i.sstatic.net/dtO9h.jpg

So I decided to implement it with the following code

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

However, my output ended up like this https://i.sstatic.net/2qoJJ.jpg I'm struggling to make the forms align inline with the picture, any suggestions?

htmlcssbootstrap-4

Answer №1

How can I align the forms horizontally with the picture?

To achieve this, remove your CSS and replace account-box in your HTML with the following code:

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

Add the class of row to the container holding the image and form to make them aligned horizontally, and add the class of col on both the form and image to place them in separate columns. Ensure that the image appears below the form in the markup for correct visual alignment.

Answer №2

If you want to enhance your account-box-content class, consider incorporating the following code:

 display: inline-block;

To see this in action, check out this live demo on JSFiddle: https://jsfiddle.net/qp9e5d6v/

Answer №3

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

jqueryhtmlcss

A guide on retrieving <div> element in a WordPress function PHP file

How can I wrap a div around the output from this code snippet? add_filter( 'the_content', function( $content ) { if (is_singular('cda')) { return get_the_term_list( get_the_ID(), 'cda_cat', 'Product:' ).$con ...

phphtmlwordpressfunction

Explore the Filter List without being affected by the arrangement of words or the level of search precision

I was able to resolve the issue by adjusting my search filter algorithm. Now, I can search regardless of word order, but the results are not as specific as I need them to be. When I type "Correy" in the search bar, it shows all results containing that wo ...

javascriptjqueryhtmlcssfrontend

caption located outside of the image in nivo slider

Is there a way to show different texts on the left side of pictures using a nivo slider and have them slide like pictures? I have tried various solutions but cannot seem to move the text outside of the picture. When I add a negative value to the left, the ...

jqueryhtmlcssnivo-slider

Understanding the concept of margins and managing tile layouts

I'm facing a few issues that I can't seem to resolve, and I would appreciate some guidance on how it all works. Firstly, I have a container with the ID "kafle" which I've positioned as desired, but now I want to add multiple tiles into it. M ...

htmlcss

How can the bootstrap mega menu be modified to use an onclick function and incorporate drop-down items for mobile users?

Is it possible to change the drop-down menu behavior for small devices to make it work on click instead of hover? The issue I'm facing is that the sub-menus are appearing outside the root navigation on mobile devices. How can I modify the code to ensu ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for formatting HTML to showcase two data cards when printing a page

My XML data input document can be neatly transformed into printable data cards, whether it's 2 to a page, 4 to a page, 9 to a page, or any other configuration. What is the most effective method for styling the data to fit the printing layout? How can ...

htmlcssprinting

Combine two separate variables and insert them into a single cURL command line

I need to incorporate a random value from a variable into a cURL command. Additionally, I want the cURL command to execute a function using this random value. At the end of the function, I want to add a different value to the first one for completion and t ...

phphtmlvariablescurl

Importing Data on the Fly into Django Model

I'm currently exploring ways to dynamically load information into a modal for a quick preview on my ecommerce platform. Any guidance or suggestions would be greatly appreciated as I'm a bit uncertain about the best approach to take. I've exp ...

javascripthtmldjangoajaxdjango-models

Div being visually overtaken by background image

I am struggling to make the image declared in bg fit into the container-fluid without overflowing. You can check out the live example at . The main objective is to position the text on top of the image so that I can apply opacity and blur effects to the i ...

htmlcss

The JavaScript function modifies the value stored in the local storage

I'm in the process of developing a website that requires updating the value of my local storage when certain JavaScript functions are executed. Currently, I have this code snippet: localStorage.setItem('colorvar', '#EBDBC2'); I&ap ...

javascripthtmlcssfrontendstorage

Conceal button in PHP

Is there a way to remove the background of this button? 1 <-- VIEW BACKGROUND IMAGE <button type="submit" name="submit" value="submit"><img src="https://cdn.discordapp.com/attachments/653356422083379252/654012639847907328/download-button-png- ...

javascriptphphtmlsqlajax

Utilizing the power of CSS' calc() function in ReactJS using react-motion's <Motion/>

I'm currently attempting to utilize calc() within a template string for the following scenario: <Motion defaultStyle={{ y: 0, opacity: 1 }} style={{ y: spring(this.state.navBarOpen ? 0 : `- calc(3.25em + 0.5vw)`), opacity: sp ...

cssreactjsreact-motion

Adjustable Footer Size with Minimum Size Constraint

On my webpage, I have a footer that is not fixed in place. Currently, the page's content does not require scrolling, and the footer occupies about 25% of the browser window at full screen on a 1920 x 1080 display. The footer's contents are aligne ...

javascriptjqueryhtmlcss

The issue of the horizontal navigation bar not functioning properly persists when a specific width

I am currently working on building a horizontal navigation bar using CSS. What puzzles me is that when I specify a width for my ol tag, the horizontal float function does not seem to cooperate. However, if I remove the width property, everything works jus ...

htmlcsscss-float

"Applying CSS styles to expand the size of

Is there a way to prevent the blue div from overflowing the red div, but still always fill its parent container? I searched on stackoverflow and found suggestions to use height: 100%, but this causes issues when the child element has padding. How can this ...

htmlcss

The conditional rendering logic in the ng-if directive does not seem to be synchronizing

Currently, I am delving into AngularJS and working on a basic application to gain familiarity with it. Within my app, there are four tabs: List, Create, Update, and Delete. However, my goal is to only display the Update and Delete tabs when I press the b ...

javascripthtmlangularjs

Unable to retrieve module from directive template in Angular

I am currently working on creating a wrapper component for ngAudio. This wrapper will act as the player with controls and will interact with ngAudio's functions. However, I am facing some scope issues with it. I can inject ngAudio into the component&a ...

javascripthtmlangularjsdirective

I am having trouble aligning the unordered list in the center

My struggle lies in centering the ul element which serves as a menu. Despite trying various CSS properties such as margin: 0 auto;, text-align: center;, and adjusting the margin value, I am unable to achieve the desired result. This is the CSS code I have ...

htmlcss

Is there a way to encase numerous <tbody> elements together?

My table design has specific css requirements where I am using multiple <tbody> tags. It looks like this: Example with multiple tbody tags However, I also need a wrapper for the multiple tbody tags (similar to a common tbody parent) that can be scr ...

htmlcss