Centering my page

Discussion in 'CSS' started by cro91, Sep 24, 2011.

0
  1. #1
    What I have been trying to do and failing to accomplish is to have my page centered but when the left side reaches the side of the window it does not go off screen.

    A good example is to re-size your browser on this website. Rather then 100% centered it keeps the left side on the page.

    How can I accomplish this?
     
    cro91, Sep 24, 2011 IP
  2. gvre

    gvre Member

    Messages:
    35
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    33
    #2
    To center your page, you must apply width and margin: auto to main container and text-align: center to body.
    For example
    
<html>
        <head>
                <style type="text/css">
                        body { text-align: center; }
                        #wrapper { width: 960px; margin: auto; text-align: left; }
                </style>
        </head>
<body>
        <div id="wrapper"></div>
</body> 
</html>
    Code (markup):
     
    gvre, Sep 24, 2011 IP
  3. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yea I already have the page centered but it seems to keep the whole page dead center no matter what the browser size is.

    Here is the main containers of my css.

    
body {
	font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	border-top: 3px solid #00C6FF;
	background-image: url('images/bg1.png');
	background-repeat: repeat-y repeat-x;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #00C6FF;
	margin-left: auto;
	height: 1200px;
	width:860px;
}


#wrapper {
	width:1000px;
	margin:0 auto;
}

#whiteback {
	background-color:#666666;
	height: 1180px;
	margin-bottom: 15px;
	width: 1000px;
	position: absolute;
	left: 50%;
	margin-left:-500px;
}
    Code (markup):
     
    cro91, Sep 24, 2011 IP
  4. gvre

    gvre Member

    Messages:
    35
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    33
    #4
    You need to set 
    text-align: center;
    Code (markup):
    to body. Maybe removing body's width and margin will fix the problem.
    You could also remove 
    [FONT=monospace]background-repeat: repeat-y repeat-x;[/FONT]
    Code (markup):
    from css since it's meaningless.
     
    gvre, Sep 24, 2011 IP
  5. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I added what you said and it didn't seem to fix anything im pretty for sure it has to do with this id.

    
#whiteback {
	background-color:#666666;
	height: 1180px;
	margin-bottom: 15px;
	width: 1000px;
	position: absolute;
	left: 50%;
	margin-left:-500px;
}
    Code (markup):
    Prob with the left50% but if I use margin-left:auto; or anything of the sort it has no effect.
     
    cro91, Sep 24, 2011 IP
  6. gvre

    gvre Member

    Messages:
    35
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    33
    #6
    Could you post the page url?
     
    gvre, Sep 24, 2011 IP
  7. cro91

    cro91 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Currently my page is still updating its name servers so its not avaliable. I will see if I can find one of those temp free ones.
     
    cro91, Sep 24, 2011 IP
  8. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #8
    You have your CSS set as a "fixed width" so no matter the size of the screen / resolution the page will maintain the same size and remain centered...

    If you want a "fluid width" that expands / contracts with size of the browser window, then you need to adjust your css to allow for this...

    example... 
    
min-width: 1000px;
max-width: 1280px;
    Code (markup):
     
    workingsmart, Sep 24, 2011 IP