Results 1 to 10 of 10
  1. #1
    Join Date
    Aug 2005
    Location
    EIB Network
    Posts
    474

    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 Thumbnails Attached Thumbnails css-problem.gif  
    People train run out of Stubville.

  2. #2
    Join Date
    Nov 2002
    Location
    Space Coast, FL
    Posts
    160
    From what I can tell you simply need to let your outer div know it should center it's content, correct?

    Transitional: align="center" - this can be applied directly to the div.
    Strict: text-align: center; - in the css would work, although there are other ways.

    FYI a 600px div inside a 990px div would still create horizontal scroll bars on 800x600 res.
    Loading Deck
    Freelance web designer
    XHTML CSS web sites

  3. #3
    Join Date
    Aug 2005
    Location
    EIB Network
    Posts
    474
    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.
    Attached Thumbnails Attached Thumbnails css-problem2.gif  
    Last edited by seodevhead; 09-26-2006 at 08:48 AM.
    People train run out of Stubville.

  4. #4
    Join Date
    Nov 2002
    Location
    Space Coast, FL
    Posts
    160
    Yes I see what you're saying, just use my above either directly on the div or via css.
    Loading Deck
    Freelance web designer
    XHTML CSS web sites

  5. #5
    Join Date
    Aug 2005
    Location
    EIB Network
    Posts
    474
    Can't get it working????

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css">
    
    #content1 {
    	width: 500px;
    	border: 1px solid #000;
    	height: 900px;
    	text-align: center;
    	
    }
    
    #content2 {
    	width: 200px;
    	border: 1px solid #000;
    	height: 800px;
    		
    }
    
    </style>
    </head>
    
    <body>
    <div id="content1">
    	<div id="content2">asd</div>
    
    </div>
    </body>
    </html>
    People train run out of Stubville.

  6. #6
    Join Date
    Oct 2002
    Location
    Canada
    Posts
    3,103
    Add this in #content2 style
    Code:
    margin:0px auto;

  7. #7
    Join Date
    Aug 2005
    Location
    EIB Network
    Posts
    474
    Quote Originally Posted by sasha
    Add this in #content2 style
    Code:
    margin:0px auto;
    Even if I add that, it still won't center the inner-div to the view port when viewed on small res screens. It just centers it to the wrapping div.
    People train run out of Stubville.

  8. #8
    Join Date
    Dec 2004
    Posts
    729
    Quote Originally Posted by seodevhead
    Can't get it working????

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css">
    
    #content1 {
    	width: 500px;
    	border: 1px solid #000;
    	height: 900px;
    	text-align: center;
    	
    }
    
    #content2 {
    	width: 200px;
    	border: 1px solid #000;
    	height: 800px;
    		
    }
    
    </style>
    </head>
    
    <body>
    <div id="content1">
    	<div id="content2">asd</div>
    
    </div>
    </body>
    </html>

    I don't think what you are asking is possible without javascript.
    Content1 is 500px in your example, meaning even if my screen is only 400 px wide it's still 500px and since content2 is inside of content1 it will only be affected by changes made to content1 not to the size of the browser. In other words, resizing the browser will never have an effect on content2.
    Last edited by Teh_Winnar; 09-26-2006 at 09:55 AM.
    Who is General Fault, and why is he reading my disk?

  9. #9
    Join Date
    Oct 2002
    Location
    Canada
    Posts
    3,103
    I get it. You want inner div always centered to the screen and centered to the outter div when screen size allows. There are two ways to go about that and none of them is too nice.
    One way is to have inner div outside of outer div :
    <div id="content1"></div>
    <div id="content2"></div>
    and then set margin auto to each div and position top for content2.

    The other way would be checking offsetLeft on window load and window resize and using JS to scroll window to the right until your div is in the screen center.

  10. #10
    Join Date
    Dec 2004
    Posts
    729
    Quote Originally Posted by sasha
    I get it. You want inner div always centered to the screen and centered to the outter div when screen size allows. There are two ways to go about that and none of them is too nice.
    One way is to have inner div outside of outer div :
    <div id="content1"></div>
    <div id="content2"></div>
    and then set margin auto to each div and position top for content2.

    The other way would be checking offsetLeft on window load and window resize and using JS to scroll window to the right until your div is in the screen center.

    yes, you could do this
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css">
    html, body {
    height:800px;
    }
    #content1 { width: 900px; border: 1px solid #000; height: 900px; text-align: center; margin:auto; }
    #content2 { position:relative; top:-900px; width: 600px; border: 1px solid #000; height: 800px; margin:0px auto; margin-top:50px; }
    </style>
    </head>
    <body>
    <div id="content1"> </div>
    <div id="content2">asd</div>

    </body>
    </html>

    This does accomplish what you want, I am not a big fan of using negative margins top margins because now you have 800 px of blank space at the bottom... You can fix this in firefox by adding a height the the html or body element however the problem still exists in IE. This works, but Javascript would be the best solution.
    Who is General Fault, and why is he reading my disk?

Posting Permissions

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