SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keep positioning with centered layout

    I'm trying to do a page layout where the page stays centered in the browser window. I have a background image pattern centered in the page <body> tag that repeats on the y axis and all of the other elements of the page work around that background image. My question is: how do I get the other elements on the page (inside <div> tags) to move horizontally in relation to this background image when the browser window is resized? So basically I want the site elements to have absolute positioning vertically and relative positioning to the background image horizontally. Is this possible?

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    Its not relative positioning you'd be wanting to use to achieve this. Relative positioning only moves an element visually, not physically. So its not one used very often by people who understand it. I use it mainly so i can create a stacking context for use with z-indexes.

    I get what you're after though.......A screenshot or a link would be helpful but the best way to do this would probably be to position the div's using floats and use percenatges on the floats and their margins to get the elements where you want. Then when you resize the window they'll move as you want.

    As i say post a screen grab and you'll get a more definate answer.
    Last edited by elduderino; Oct 11, 2006 at 12:59.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I actually figured out what I needed. I actually found the solution in the Sitepoint book, "The CSS Anthology, 101 Essential Tips, Tricks, & Hacks." It instructed me to create a <div> tag with position: relative and then put the divs with position: absolute inside of those. It worked great! Go Sitepoint!

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stampyhead
    Thanks. I actually figured out what I needed. I actually found the solution in the Sitepoint book, "The CSS Anthology, 101 Essential Tips, Tricks, & Hacks." It instructed me to create a <div> tag with position: relative and then put the divs with position: absolute inside of those. It worked great! Go Sitepoint!
    Yep, that's the right way to do it. Your absolutely positioned divs will take their reference point from the relatively positioned div :-)

    Nadia


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
  •