Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center Align heading

    I'm trying to align the header of my page. It works in IE, but can't get it to work in firefox(I know it's backwards and it pains my soul).
    Code:
    <div style="width:100%; text-align:center">
      <div style="width:800px; height:127px; background-color:#003399;">
      Test
      </div>
      <div style="width:800px; height:26px; background-color:#6698cb;">
      Test
      </div>
    </div>
    I want the two inner divs centered on the page. I tried using margins and padding but doesn't work for different resolutions. If it works at 1152 864, it doesn't work at 800x600. Idears?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <div style="width:100%; text-align:center;">
      <div style="width:800px; height:127px; background-color:#003399;margin: 0 auto">
      Test
      </div>
      <div style="width:800px; height:26px; background-color:#6698cb;margin: 0 auto">
      Test
      </div>
    </div>
    IE uses the text-align property on anything. FF needs the margin: 0 auto 0 auto (margin: 0 auto) to make it appear correctly as it text-aligns only text...go figure .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •