Add a hr horizontal rule in html page

Question

In my page, i have a Col which contains of an image container and below it i would like to add a banner. I want to add a hr or horizontal rule to separate the two as follows

As you can see the hr is added but when i scroll my image container, the hr doesn't stay. See image as follows:

How do i make the hr stay irrespective of the entire length and scroll. Any help?

HTML code:

 <Col className="details">
                            <div className="image-container">
                                <center>
                                    <div className='container p-1'>
                                        <div className="image">
                                            <img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img>
                                            <div className="caption">Product Title<br></br>
                                                <small className='ellipsis'>Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</small>
                                                <span className="tooltiptext">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</span>
                                            </div>
                                        </div>
                                        
                                        
                                    </div>
                                    
                                    <div className='container p-1'>
                                        <div className="image">
                                            <img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
                                            <div className="caption">Left Product Title<br></br>
                                            <small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
                                            <span className="tooltiptext">Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
                                            </div>
                                        </div>
                                        
                                </div>
                                    <div className='container p-1'>
                                        <div className="image">
                                            <img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
                                            <div className="caption">Right Product Title<br></br>
                                            <small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
                                            <span className="tooltiptext">Third Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
                                            </div>
                                        </div>
                                    </div> 
                                    
    
                                </center>
                            </div>
                            <hr/>
                            <div>
                                {/* <center> */}
                                    {/* <img style={{ width: 350, height: 350 }} src='http://ecx.images-amazon.com/images/I/518Se4188mL.jpg'></img> */}
                                {/* </center> */}
                            </div>
                        
                            
                        
                        </Col>

Please share the CSS as well as the resulting HTML so we can help find the fix. You can even make your code run directly in StackOverflow with the `<>` button. I assume the hr tag needs the width of the container above (maybe just put it into the div not outside of it?) — Peter Krebs, Feb 13 '23 at 14:17
`` is not HTML, and neither is a `className` attribute. So at least tell us what you are _actually_ using there, or provide the rendered HTML. — CBroe, Feb 13 '23 at 14:28

score 1 · Answer 1 · answered Feb 13 '23 at 14:29

1

Just put your hr inside the div from which you want to inherit the width. Otherwise if your content scrolls horizontally in sections you could block it in the middle of 2 divs, but I don't think it's your case (see second snippet).

.long-div {
  width: 250vw;
}

<div class="long-div">
  long div 1
  <hr/>
</div>

<div class="long-div">
  long div 2
</div>

.long-div {
  overflow-x: auto;
}
.long-div-content {
  width: 250vw;
}

<div class="long-div">
  <div class="long-div-content">
    long div 1
  </div>
</div>
<hr/>
<div class="long-div">
  <div class="long-div-content">
    long div 2
  </div>
</div>

answered Feb 13 '23 at 14:29

s_frix

323
2
11

Thanks for your answer s_frix but both doesn't work for me. – Abcd Efgh Feb 14 '23 at 07:49
1. WHen i added hr inside first div, the hr line ended when I scrolled – Abcd Efgh Feb 14 '23 at 07:50
2. I cannot use overlow-x:auto in first div as it is preventing my tooltips from being rendered and it is displayed half. So there is no overflow added in first div. – Abcd Efgh Feb 14 '23 at 07:51
any other solution or html tag that can be used? – Abcd Efgh Feb 14 '23 at 07:56

Add a hr horizontal rule in html page

1 Answers1