How to position two forms next to each other centered over an image

Question

I am pulling my hair out over the correct way to position two forms using html and css. I have tried both float and display:inline-block but only managed to get half of it working using one of the methods.

My target is to have the two forms display next to each other centered in a DIV that is only 70% of the page and each form takes up 50% of the available space. Both forms need to have a minimum width and should be pushed into separate lines if there isn't enough space to display both next to each other (i.e. when displaying the page on a phone in portrait mode)

If I float the two DIVs containing the forms they are displayed side by side but are not centered correctly (as they float either left or right and I need to set the size of each DIV to 40% or they don't fit next to each other). If I use display:inline-block the DIVs are in the correct size and centered but are in two separate lines and not next to each other.

Here is the current code using display: inline-block

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 50%;
  display: inline-block;
}
#form2 {
  width: 50%;
  display: inline-block;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div>
    <div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>

Why are the forms on different lines when using display:inline-block ?

Answer 1

You might be having trouble getting the two inline-block elements next to each other because 50% times two plus the white space between the elements is greater than 100% of the container. Therefore, the second element doesn't have enough space and wraps to the next line.

inline-block elements will respect white space in the HTML code. The white space between the two elements is demonstrated below:

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 40%;
  display: inline-block;
  background-color: #CCC;
}
#form2 {
  width: 40%;
  display: inline-block;
  background-color: #CCC;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div>
    <div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>

So, one solution to your issue is to remove the white space, as shown below.

I have also given each element a minimum width so that they wrap to separate lines when the window is below a specified width. To see this action, click the "Full page" button in the upper right corner and resize your browser window.

#background {
  background-image: url(pic.jpg);
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
}
#form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#form1 {
  width: 50%;
  display: inline-block;
  min-width:200px;
}
#form2 {
  width: 50%;
  display: inline-block;
  min-width:200px;
}

<div id="background">
  <div id="form-wrapper">
    <div id="form1">
      <form>some form code here</form>
    </div><div id="form2">
      <form>some form code here</form>
    </div>
  </div>
</div>