Question regarding using the <hr> tag

This is embarrassingly simple but I’m using the ‘hr’ tag to create a horizontal line on a web page but I’m struggling to find a way to position it precisely on the page. No matter what I do it sits at the very top of the page. I’ve tried googling the answer to no avail.

Can someone please explain how i can move the line either on the html or using css? My usual method for positioning elements in css is this:


but this didn’t work. I don’t know if there is another, simpler way to create a line which might be easier?



If the hr is in the flow of the page (i.e. it follows another in-flow element) then you don’t need to position it at all.

Just place the hr in the html at the point required and then use margins to move it away from the element above and to push the element after it downwards if required.

Absolute positioning is only needed when you want to place something ‘out of the flow’ of the document and generally only used in small doses.

Generally you can create a divider line by placing a bottom border on the div concerned but does depend on what you are doing exactly.

We’d need to see your html and css to give more specific advice :slight_smile:

Hi Paul

Thanks for the advice. I guess I may have an issue with the ‘flow’ of the page. I’ve always used absolute position to arrange elements on the page. What’s the best way to load html other than copy/paste on to this page?

You mean for posting code here? There’s a handy tutorial:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.