SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow centered fixed div in fixed container?

    Hey guys, I am having one heck of a time trying to find a solution for seemingly an easy layout question of mine.

    I have a layout that has a fixed container (the <body> tag) of 990px, but I am interested in having a 600px fixed-width box within the body dimensions that is centered to the viewing window (the browser). How can I make this "inner" fixed-width div of 600px not only be centered based on the viewing window, but also just simply center itself in the 990px body box when someone viewing a super wide resolutions views the screen? I hope this makes sense... if it doesn't I'd be glad to help clarify. Thanks.
    Attached Images Attached Images

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #box {
      width:600px;
      margin-right:auto;
      margin-left:auto;
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Cuckoo,

    Your code centers the inner div but does not make it center to the viewing box when using a screen res of under 990px. That is the problem I am facing. If the screen res is wider than 990px... I simply want that inner div to center within the 990px body element. However, if someone is using a smaller screen res of say 800px, I want that inner div to center to their viewing port as opposed to the 990px body tag. That way the inner div won't be off center on smaller resolutions. Understand?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assumed that your 990px container was centred.

    If it's not, then I can't understand what you mean. You said,
    Quote Originally Posted by seodevhead
    How can I make this "inner" fixed-width div of 600px not only be centered based on the viewing window, but also just simply center itself in the 990px body box when someone viewing a super wide resolutions views the screen?
    The second clause led me to believe that you wanted the inner box centred within the 990px container.

    So you want a 990px container (even if the viewport is less than 990px) and you want a child of that container to be centred relative to the viewport, not to the container?

    I can't think of a way to do that without using absolute positioning.

    What if the viewport is less than 600px wide?
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I have come up with a simple diagram that will explain exactly what I am asking. Let me know if this makes it all clear... Thanks!
    Attached Images Attached Images

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey All4Nerds... that is a great layout and it is what I am looking for... however, how can I make the main outer div (in your case div.x), not be centered? I want the div.x (or outer div) to be fixed on the left. Thanks!


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
  •