Trying to add a horizontal line below both floating divs

Question

I've tried looking through stack overflow and couldnt find an answer. Anyways I'm trying to add a horizontal line below two floating divs. The horizontal line is only going below the first one but not the second. I would prefer if they weren't floats if thats poasible. They just need to be in line with each other. Here's the html

<h1 id="quoteSumTitle">Quote Summary</h1>
<h4 id="quotePriceText">Total cost "the quote price WIP"</h4>
<h5 id="CustomerTitle">Customer</h5>
<hr />
<div id="CustomerInfoInline" style="float:left">
    <section>
        <h6>Name: "insert"</h6>
        <h6>Address: "insert"</h6>
        <h6>City, State, Zip: "insert"</h6>
        <h6>SSN: "insert"</h6>
        <h6>DOB: "insert"</h6>
        <h6>Email: "insert"</h6>
        <h6>DOB: "insert"</h6>
        <h6>Prev. Carrier: "insert"</h6>

    </section>
    <hr id="hrBelowCustomer" />
</div>

<div id="CustomerDiscountsInline" style="float:right">
    <section>
        <h6 id="customerBold">Customer Discounts</h6>
        <h4 id="DiscountsID">discounts will be applied here</h4>
    </section>
    <hr />
</div>

and the respective css

#quoteSumTitle{
    text-align:center;
    margin-bottom: 60px
    
}
#quotePriceText{
    text-align:center;
    margin-bottom:40px
}
#CustomerTitle{
    color:lightslategray
}
#CustomerDiscountsInline{
    vertical-align:top;
    
}
hr {
    clear: left;
    clear:right
}
#hrBelowCustomer{
    top:500px;
}

If you want the `hr` to span both floated `div`s, move it outside of the `div`s, and only use one. If you don't want to use `float`, use `display: grid` or `display: flex` or any of the techniques described in the countless answers to questions with "Side by side" in the title. — Heretic Monkey, Aug 18 '21 at 23:18
Does this answer your question? [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) — Heretic Monkey, Aug 18 '21 at 23:19

score 0 · Answer 1 · answered Aug 18 '21 at 23:20

You can remove the floats and use the flex instead, wrapping both divs with one parent div. You can do it like this:

#quoteSumTitle{
    text-align:center;
    margin-bottom: 60px
    
}
#quotePriceText{
    text-align:center;
    margin-bottom:40px
}
#CustomerTitle{
    color:lightslategray
}
#CustomerDiscountsInline{
    vertical-align:top;
    
}
hr {
    clear: left;
    clear:right
}
#hrBelowCustomer{
    top:500px;
}

.info{
  display:flex;
  flex-direction:row;
  justify-content: space-between
}

<h1 id="quoteSumTitle">Quote Summary</h1>
<h4 id="quotePriceText">Total cost "the quote price WIP"</h4>
<h5 id="CustomerTitle">Customer</h5>
<hr />
<div class="info">
  <div id="CustomerInfoInline">
    <section>
      <h6>Name: "insert"</h6>
      <h6>Address: "insert"</h6>
      <h6>City, State, Zip: "insert"</h6>
      <h6>SSN: "insert"</h6>
      <h6>DOB: "insert"</h6>
      <h6>Email: "insert"</h6>
      <h6>DOB: "insert"</h6>
      <h6>Prev. Carrier: "insert"</h6>
    </section>
  </div>

  <div id="CustomerDiscountsInline">
    <section>
      <h6 id="customerBold">Customer Discounts</h6>
      <h4 id="DiscountsID">discounts will be applied here</h4>
    </section>
  </div>
</div>
<hr />

Trying to add a horizontal line below both floating divs

1 Answers1