Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

macOS HTML horizontal rule across the full width of the page.

N

Nutter

macrumors 6502
Original poster
I'm grapping with this, and wondering if someone who knows more about HTML and CSS can help me.

My best attempt looks like this:

Code: 
<div style="margin-left:-8px;margin-right:-8px"><hr style="color:Black;background-color:Black;border:0;width:100%;height:1px;" /></div>

The -8px modifier for the left and right margins is to counteract the 8px margin of the <body> element. This works nicely, except when the page content is larger than the browser window — in that case, the horizontal rule goes to the window's edge, but not the page's edge.

Attached is an illustration of the problem.

Can anyone help me out?
 

Attachments

  • Picture 1.png
    Picture 1.png
    58.3 KB · Views: 235
That doesn't seem to help. I don't want the rule to be centred, I want it to take up the entire width of the page, with no white space on either side.
 
Can you paste (or link to) the entire source? I think

Code: 
<div style="position:absolute;left:0px;width:100%><hr /></div>

might work.

Edit: OK this works for me with an 8px margin on the body element:

Code: 
<div style="position:absolute;left:0px;right:0px"><hr /></div>
 
Hm, that doesn't seem to help either. The same problem - if the page is wider than the browser window, the horizontal rule is only as wide as the window itself.

Here's the full code:

Code: 
<html><body style="margin:8px;">This is some text.<div style="margin-left:-8px;margin-right:-8px"><hr style="color:Black;background-color:Black;border:0;width:100%;height:1px;" /></div>More text.<br /><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" style="width:1000px;height:1000px;"></body></html>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back