HTML horizontal rule across the full width of the page.

Discussion in 'Mac Programming' started by Nutter, May 24, 2008.

  1. Nutter macrumors 6502

    Joined:
    Mar 31, 2005
    Location:
    London, England
    #1
    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?
     

    Attached Files:

  2. Peace macrumors Core

    Peace

    Joined:
    Apr 1, 2005
    Location:
    Space--The ONLY Frontier
    #2
    Insert a <center> tag before the <div> one. That way it stays in the center no matter what.
     
  3. Nutter thread starter macrumors 6502

    Joined:
    Mar 31, 2005
    Location:
    London, England
    #3
    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.
     
  4. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #4
    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>
    
     
  5. Nutter thread starter macrumors 6502

    Joined:
    Mar 31, 2005
    Location:
    London, England
    #5
    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>
    
     

Share This Page