1

I have two div elements, and I want to align them on the same line. I've tried more or less everything, and they are still under eachother.

My code is as follows

body {
  background-color: #1b1b1b;
  padding-left: 4%;
  font-family: Helvetica;
}

h1 {
  font-size: 40px;
  color: white;
}

.important {
  color: #5a92f0;
}

.left-side {
  float: left;
  display: inline-block;
  margin: 10px;
  padding-right: 50%;
}

.signup {
  float: right;
  background-color: white;
  padding-left: 5%;
  padding-right: 5%;
  border-radius: 5px;
  border: 1px solid white;
  text-align: center;
  display: inline-block;
  margin: 10px;
}

.signup p {
  font-size: 12px;
}

.signup h3 {
  font-size: 17px;
}

.signup a {
  color: #383737;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #000;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #5a92f0;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
<div>
  <div class="left-side">
    <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>
  </div>
  <div class="signup">
    <h2> Lorem ipsum dolor sit </h2>
    <h3> Lorem ipsum dolor sit amet </h3>
    <input id="email" name="emailaddress" placeholder="user@example.com" type="text">
    <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>
    <input value="Submit" type="submit">
    <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>
  </div>
</div>

What happens is one div shows up above, and the other div shows up centered below the first div. I want them on the opposite side of eachother.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415

1 Answers1

3

I'd suggest looking into flexbox which can help with alignment issues and is a good replacement for floats. I've set the body to display: flex, and the left and right divs to flex: 1.

This should work:

<style>
  body {
    background-color: #1b1b1b;
    padding-left: 4%;
    font-family: Helvetica;
    display: flex;
    align-items: center;
  }
  
  h1 {
    font-size: 40px;
    color: white;
  }
  
  .important {
    color: #5a92f0;
  }
  
  .left-side {
    flex: 1;
    display: inline-block;
    margin: 10px;
    padding-right: 10%;
  }
  
  .signup {
    flex: 1;
    background-color: white;
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 5px;
    border: 1px solid white;
    text-align: center;
    display: inline-block;
    margin: 10px;
  }
  
  .signup p {
    font-size: 12px;
  }
  
  .signup h3 {
    font-size: 17px;
  }
  
  .signup a {
    color: #383737;
  }
  
  input[type=text],
  select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  input[type=submit] {
    width: 100%;
    background-color: #5a92f0;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
<div class="left-side">
  <h1> Lorem ipsum dolor sit. <span class="important">Lorem ipsum dolor sit.</span></h1>
</div>
<div class="signup">
  <h2> Lorem ipsum dolor sit </h2>
  <h3> Lorem ipsum dolor sit amet </h3>
  <input id="email" name="emailaddress" placeholder="user@example.com" type="text">
  <p>Lorem ipsum dolor sit amet, <a href="/terms">consectetur</a> adipiscing <a href="/privacy">elit sed</a>. </p>
  <input value="Submit" type="submit">
  <p>Lorem ipsum dolor? <a href="">Lorem ipsum</a></p>
</div>
Traf
  • 54
  • 8