SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    United Kingdom
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css positioning headache

    hi,

    i have a page with 2 divs, both 700px wide. I want div B to appear before div A although div A is first in the list. Now i've managed to do that with absolute positioning but i need it to be centered in the webpage.

    <html>
    <head>
    <style>
    <!--
    #A {width:700px; margin:0 auto; }
    #B {position:absolute; width:700px; margin:0 auto;}
    -->
    </style>
    </head>
    <body>
    <div id="A">this is div A</div>
    <div id="B">this is div B</div>
    </body>
    </html>

    So div B appears on top on div A but it is not centered on the page. Anybody got any ideas how to do that?

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can i ask why on earth you need b to appear before A in the list.??

    why bother making css do it??

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To answer your question:
    Code:
    #B {
      position: absolute;
      width: 700px;
      left: 50%;
      margin-left: -350px;
    }

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the difference in doing that then just removing the absolute positioning...produces the same effect, and B is till below A which is not what he wanted...he wanted B on top and A below! (at least i think so)

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    United Kingdom
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right!

    Reason i need this is for SEO, where i need my content to appear first in my source code.

    Have a look at test page here:

    http://www.fancyacar.co.uk/thisdesign2.htm

    All i need to do is move the header to the top of the container. The style is within the actual htm file.

    What do you guys suggest?

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    United Kingdom
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cannot believe i spent 8hrs tweaking my css when i could just have asked on this forum!

    Really impressing all4nerds, works like a charm!

    Thank you very much

    PS: Think i got happy too soon

    It works fine in Firefox but the footer aint displaying right is IE

    http://www.fancyacar.co.uk/thisdesign3.html

    Now what?
    Last edited by gices; Jun 28, 2006 at 06:13. Reason: Oopsy!

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    United Kingdom
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You must think i'm really daff ... lol.

    I've spent too much time on this, i need a break from my pc now.

    Thanks A Lot All4Nerds!


Bookmarks

Posting Permissions

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