Add or force line break after div

Question

I have a div where some anchor tags are stored, as shown below. As well as the <hr> for my page segment. however, even using a div as a block element will not cause the <hr> element to start on a new line, but align the <hr> next to the div.

how can i solve this?

 <div id="inner"> <div id="headerBlock"> <a href='.actorgroup' id='346' onclick='return displayactorgroupFunc(this.id);'>Actor2</a> <span class='rowNumber2'> | </span> <a href='.actorgroup' id='15201' onclick='return displayactorgroupFunc(this.id);'>Actor1</a> </div> </div><hr/> 

Css:

 #headerBlock{ display: block; } #inner { padding:10px; display:block; float: left; } #inner a{ display:inline-block; padding-left:20px; line-height:20px; color:#808000; font-size:14px; text-decoration: none; } 

Answer 1

The float:left problem causes the problem. Apply clear:both; to <hr> will be:

 hr{ clear:both; } 

Demo

Answer 2

Find the solution below with HTML (CSS will remain the same). I changed the code for short.

 <div id="inner"> <div id="headerBlock"> <a>Actor2</a> <span class='rowNumber2'> | </span> <a>Actor1</a> </div> </div> <hr style="clear:both;"> 

Answer 3

Add this style

 .rowNumber2{ display : block; } 

Answer 4

None of this helped. For my purpose, it was as simple as adding.

 page-break-inside: avoid; 

This tells the browser to refer to the type of div / to which it is applied, as to a single object that should not be divided into several pages.