CODEWITHSUNDEEP
htmlcss
Prathmesh
Prathmesh

Reputation: 73

After putting two divs beside each other, the one on the right is at the bottom

I can't seem to figure out why the two divs aren't beside each other.

Right now the div on the right is on positioned at the top right, and the div on the right is right below it & aligned right.

.quotes {
  background-color: #ebeaeb;
  display: block;
}
@media (min-width: 1366px) {
  .quotes {
    width: 1280px;
  }
  .ipad {
    width: 55%;
  }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .quotes {
    width: 992px;
  }
  .ipad {
    width: 70%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .quotes {
    width: 766px;
  }
  .ipad {
    width: 90%;
  }
}
.ipad-div {
  display: inline-block;
  width: 50%;
  background: #777;
  padding: 5px;
}
.card-div {
  display: inline-block;
  vertical-align: top;
  background: yellow;
  width: 49%;
  padding: 5px;
}
<div class="quotes" id="main-quotes">
  <div align="left">
    <div class="ipad-div" align="right" id="ipad-my-div">
      <img class="ipad" src="images/pricing/ipad.png" alt="iPad">
      <div align="center" class="try-end-ipad" data-700-end="opacity: 1" data-600-end="opacity: 0">
        <font class="try-free">Try Hubdoc for FREE</font>
        <img class="price" src="images/pricing/price.png" alt="$19/m">
      </div>
    </div>
  </div>

  <div align="right">
    <div class="card-div" align="left">
      <section>
        <div align="center" class="try-end">
          <font class="try-free">Try Hubdoc for FREE</font>
          <img class="price" src="images/pricing/price.png" alt="$19/m">
        </div>
        <div class="receipt-1 serrated-top" align="center">
          <font class="eye-i"><i class="fa fa-eye"></i></font>
          <font class="one-title"><br>Automatically extracts<br>
                                key data from</font>
          <img class="papers-1" src="images/pricing/papers.png" alt="bank statements">

          <div class="col-1-left" align="left">
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">bills</font>
            <br>
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">statements</font>
          </div>
          <div class="col-1-right" align="left">
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">invoices</font>
            <br>
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">receipts</font>
          </div>
        </div>
      </section>

Upvotes: 0

Views: 89

Answers (3)

Crystal Miller
Crystal Miller

Reputation: 801

I realize that you received the results you wanted, but I believe it is important you understand why this was happening.

<div> default display is block, this means that is will drop to it's own line no matter the width you allot it. I recommend giving it a display of inline-block.

You must also know that on elements with a display of inline-block or block browsers render white-space between them. You can get rid of the white-space a few different ways.

My 2 favorite ways & the cleanest ways:

Method 1:

<div id='elm1'></div><!--
--><div id='elm2'></div>

Pros: Easy, Clean, & require not parent element.
Cons: Cannot be impliment in dynamic code & can leave you hard to read code.

Method 2:

<div id='parent'>
  <div id='elm1'></div>
  <div id='elm2'></div>
</div>

#parent{white-space:nowrap;}
#parent > div{display:inline-block; white-space:normal;}

Pros: Is implemented in css so it can be implemented in dynamic code & is clean.
Cons: Requires parent element & must reset child white-space values to normal.

Upvotes: 0

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20399

To accomplish this, you will need to use either float or absolute positioning.

Here is an example using float (also padding adds to an element's width, so you need to either use box-sizing: border-box or calc, I used box-sizing: border-box):

.quotes {
  background-color: #ebeaeb;
  display: block;
}
@media (min-width: 1366px) {
  .quotes {
    width: 1280px;
  }
  .ipad {
    width: 55%;
  }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .quotes {
    width: 992px;
  }
  .ipad {
    width: 70%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .quotes {
    width: 766px;
  }
  .ipad {
    width: 90%;
  }
}
.ipad-div {
  float: left;
  box-sizing: border-box;
  width: 50%;
  background: #777;
  padding: 5px;
}
.card-div {
  float: right;
  box-sizing: border-box;
  vertical-align: top;
  background: yellow;
  width: 50%;
  padding: 5px;
}
<div class="quotes" id="main-quotes">
    <div class="ipad-div" align="right" id="ipad-my-div">
      <img class="ipad" src="images/pricing/ipad.png" alt="iPad">
      <div align="center" class="try-end-ipad" data-700-end="opacity: 1" data-600-end="opacity: 0">
        <font class="try-free">Try Hubdoc for FREE</font>
        <img class="price" src="images/pricing/price.png" alt="$19/m">
      </div>
    </div>

    <div class="card-div" align="left">
      <section>
        <div align="center" class="try-end">
          <font class="try-free">Try Hubdoc for FREE</font>
          <img class="price" src="images/pricing/price.png" alt="$19/m">
        </div>
        <div class="receipt-1 serrated-top" align="center">
          <font class="eye-i"><i class="fa fa-eye"></i></font>
          <font class="one-title"><br>Automatically extracts<br>
                                key data from</font>
          <img class="papers-1" src="images/pricing/papers.png" alt="bank statements">

          <div class="col-1-left" align="left">
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">bills</font>
            <br>
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">statements</font>
          </div>
          <div class="col-1-right" align="left">
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">invoices</font>
            <br>
            <font class="checkmark-1"><i class="fa fa-check"></i></font>  <font class="check-text">receipts</font>
          </div>
        </div>
      </section>

Upvotes: 2

Trung Nguyen
Trung Nguyen

Reputation: 529

Your <div>s are too wide, most likely due to your padding of 5px. You could stick the padding inside a sub-level div to alleviate your problem.

TIP: Use F12 in your browser to developer tools (may be different depending on your browser so you can highlight sections and check the actual boxmodel outcome showing exact size of your elements.

Upvotes: 0

Related Questions