Getting hr line to go in between two other divs

Question

I am trying to get a hr tag to go in between two divs.

I have placed the hr tag under the first div and above the second. I set both divs and the hr tag to display as inline in hopes of this being a sequence and displaying one after the other. My problem is the hr tag starts at the very top and stops where the other divs are.

I have attached a fiddle to show what I am getting:

https://jsfiddle.net/31ytnun2/

.contactpagelower {
  margin-top: 40px;
}
.spancenter {
  text-align: center;
}
.contactpagecommunityContainer {
  float: left;
  width: 50%;
  margin-top: 30px;
  display: inline;
}
.contactpagecommunity {
  float: right;
  margin-right: 37%;
  background-color: #12BDB8;
  color: #FFFFFF;
  font-size: 16px;
  padding: 15px;
}
.contactpagecommunity a:link {
  background-color: #12BDB8;
  color: #FFFFFF;
  outline: none;
  text-decoration: none;
}
.contactpagecommunity a:visited {
  background-color: #12BDB8;
  color: #FFFFFF;
  outline: none;
}
.contactpagesellwithusContainer {
  float: right;
  width: 50%;
  margin-top: 30px;
  display: inline;
}
.contactpagesellwithus {
  float: left;
  margin-left: 35%;
  background-color: #12BDB8;
  color: #FFFFFF;
  font-size: 16px;
  padding: 15px;
}
.contactpagesellwithus a:link {
  background-color: #12BDB8;
  color: #FFFFFF;
  outline: none;
  text-decoration: none;
}
.contactpagesellwithus a:visited {
  background-color: #12BDB8;
  color: #FFFFFF;
  outline: none;
}
.hrafter {
  display: inline;
  margin: 0 auto;
}

<div class="contactpagelower">
  <div class="spancenter"><span class="teallarge">Extras gfgfggsfgfgsfd</span>
  </div>

  <div class="contactpagecommunityContainer">
    <p class="subscribebodytext">We want to hear from you, let us know what we can do to make your experience better!</p>
    <button onClick="#" class="contactpagecommunity"><a href="community.php">Visit our community</a>
    </button>
  </div>
  <hr class="hrafter" width="1" size="500">
  <div class="contactpagesellwithusContainer">
    <p class="subscribebodytext">Have you ever wanted to sell a product? We may be able to help.</p>
    <button onClick="#" class="contactpagesellwithus"><a href="sellwithus.php">Sell with us</a>
    </button>
  </div>
</div>

I tried separating my two divs from each other by changing the widths hoping to get a gap in the middle. Like this:

.contactpagecommunityContainer {
    float: left;
    width: 49%;
    margin-top: 30px;
    display: inline;
}
.contactpagesellwithusContainer {
    float: right;
    width: 49%;
    margin-top: 30px;
    display: inline;
}

I also tried setting the hr to be inline-block, but that just pushed the second div (.contactpagesellwithusContainer) below where the hr tag stops.

Anyone know what I am doing wrong?

Answer 1

Although hr denotes a thematic break, it is also shorthand for 'horizontal rule' so its arguable whether semantically it should be used vertically in the absence of an equivalent vr however, it is likely the closest element available.

Given your markup and what you're trying to achieve, you may be best placed with a CSS table, the advantage being that by replacing the hr with a cell border, it will scale with the content as appropriate.

.contactpagelower {
    margin-top: 40px;
    display:table
}
.spancenter {
    text-align: center;
}
.contactpagecommunityContainer {
    margin-top: 30px;
    display: table-cell;
    padding:20px;
    width:50%;
}
.contactpagecommunity {
    float: right;
    margin-right: 37%;
    background-color: #12BDB8;
    color: #FFFFFF;
    font-size: 16px;
    padding: 15px;
}
.contactpagecommunity a:link {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
}
.contactpagecommunity a:visited {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
}
.contactpagesellwithusContainer {
    display:table-cell;
    width:50%;
    padding:20px;
    margin-top: 30px;
    border-left:1px solid;
}
.contactpagesellwithus {
    float: left;
    margin-left: 35%;
    background-color: #12BDB8;
    color: #FFFFFF;
    font-size: 16px;
    padding: 15px;
}
.contactpagesellwithus a:link {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
}
.contactpagesellwithus a:visited {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
}

<div class="spancenter"> <span class="teallarge">Extras gfgfggsfgfgsfd</span>

</div>
<div class="contactpagelower">
    <div class="contactpagecommunityContainer">
        <p class="subscribebodytext">We want to hear from you, let us know what we can do to make your experience better!</p>
        <button onClick="#" class="contactpagecommunity"><a href="community.php">Visit our community</a>

        </button>
    </div>
    <div class="contactpagesellwithusContainer">
        <p class="subscribebodytext">Have you ever wanted to sell a product? We may be able to help.</p>
        <button onClick="#" class="contactpagesellwithus"><a href="sellwithus.php">Sell with us</a>

        </button>
    </div>
</div>

Answer 2

You can add float: left to <hr/> element and make second div 49% in width:

https://jsfiddle.net/31ytnun2/8/

Answer 3

You can try this

Fiddle Demo

.contactpagecommunityContainer {
    float: left;
    width: 49%;
    margin-top: 30px;
    display: inline;
}
.contactpagesellwithusContainer {
      float: right;
  width: 49%;
  margin-top: 30px;
  display: inline;
  border-left: 1px solid;
  padding-left: 10px;
}