hr tag is not working in firefox correctly

Question

This is my effective code:

.row {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #98bf21;
  box-shadow: 10px 10px 5px #888888;
  box-sizing: border-box;
  font-size: 1.2em;
  line-height: 1.6em;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  text-align: justify;
  width: 100%;
}
hr {
  display: block;
}
.row2 div {
  float: left;
}
.tblalt {
  overflow-y: auto;
  width: 100%;
}
.tblalt .left {
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-right: 5px;
  width: 30%;
}
.tblalt .right {
  border-left: 1px solid #0f0f0f;
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-left: 2px;
  width: 70%;
}

<section class="row row2">

  <h3>Albert Einstein,  1879 - 1955 </h3>

  <p>US(German-born) Physicist</p>
  <hr>
  <div class="tblalt">
    <div class="left"><b>Source</b>

    </div>
    <div class="right"><b>Quotations</b>

    </div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Before God we are all equally wise and equally foolish.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Few people are capable of expressing with equanimity opinions which differ from the prejudices of their social environment. Most people are even incapable of forming such opinions.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never teach my pupils. I only attempt to provide the conditions in which they can learn.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never think of the future - it comes soon enough. Imagination is more important than knowledge ...</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is miracle that curiosity survives formal education.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is the supreme art of the teacher to awaken joy in creative expression and knowledge.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Laws alone can not secure freedom of expression; in order that every man present his views without penalty there must be spirit of tolerance in the entire population.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Reading, after a certain age, diverts the mind too much from its creative pursuits. Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.</div>
  </div>
  <hr>
</section>

hr tag is working correctly in Chrome:

But hr tag is not working in firefox:

My site url: http://englishact.com/Quotations/AlbertEinstein.php

Any ideas on how to solve the problem?

Answer 1

This is occurring because the hr elements are actually being positioned next to the floated .tblalt elements.

To make the hr elements appear under the .tblalt elements you need to ensure they are set to clear: left; so that they clear the left floated .tblalt elements.

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

(https://developer.mozilla.org/en-US/docs/Web/CSS/clear)

.row {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #98bf21;
  box-shadow: 10px 10px 5px #888888;
  box-sizing: border-box;
  font-size: 1.2em;
  line-height: 1.6em;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  text-align: justify;
  width: 100%;
}
hr {
  clear: left;
  display: block;
}
.row2 div {
  float: left;
}
.tblalt {
  overflow-y: auto;
  width: 100%;
}
.tblalt .left {
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-right: 5px;
  width: 30%;
}
.tblalt .right {
  border-left: 1px solid #0f0f0f;
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-left: 2px;
  width: 70%;
}

<section class="row row2">
  <h3>Albert Einstein,  1879 - 1955 </h3>
  <p>US(German-born) Physicist</p>
  <hr>
  <div class="tblalt">
    <div class="left"><b>Source</b></div>
    <div class="right"><b>Quotations</b></div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Before God we are all equally wise and equally foolish.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Few people are capable of expressing with equanimity opinions which differ from the prejudices of their social environment. Most people are even incapable of forming such opinions.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never teach my pupils. I only attempt to provide the conditions in which they can learn.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never think of the future - it comes soon enough. Imagination is more important than knowledge ...</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is miracle that curiosity survives formal education.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is the supreme art of the teacher to awaken joy in creative expression and knowledge.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Laws alone can not secure freedom of expression; in order that every man present his views without penalty there must be spirit of tolerance in the entire population.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Reading, after a certain age, diverts the mind too much from its creative pursuits. Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.</div>
  </div>
  <hr>
</section>

Answer 2

Add this for <hr> tag.

hr {
clear: both;
}

Source: click here

Answer 3

Using <hr> to separate content is a bit of a hack :-) Why not try styling the actual contents:

.tblalt {
    overflow-y: auto;
    width: 100%;
    border-top: 1px dotted blue;
    border-bottom: 1px dotted blue;
    margin-bottom: 10px;
}