www.webdeveloper.com
Results 1 to 4 of 4

Thread: Vertical center and screen resolution

  1. #1
    Join Date
    Nov 2008
    Posts
    14

    Vertical center and screen resolution

    So I have a website I am working on and on my screen at 1440x900 i have the entire website vertically centered using a div with fixed height, absolute positioning, and negative margins. The problem is on smaller resolutions 1024x768 the negative margins push the top half of the website off the screen.

    I'd prefer not to have to use a javascript solution to constantly check the browser window and recenter the content. Does anyone know a pure CSS way to do this? Thanks

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,469
    Hi there devin.crossman,

    perhaps this example will suit your requirements.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Horizontally and vertically centered block</title>
    
    <style type="text/css">
    html,body{
        height:100%;
        margin:0;
        padding:0;
     }
    body {
        min-width:760px;        /*  total horizontal width of the #page div  */
        min-height:400px;       /*  total vertical height of the #page div  */
        background-color:#eae7d7;
        text-align:center;
     }
    #vertical{
        width:100%;
        height:50%;
        margin-top:-200px;     /*  half the total vertical height of the #page div */
        float:left;
    }
    #page {
        width:734px;           /*  total width=734+(2*10 padding)+(2*3 border)=760  */
        height:374px;          /*  total height=374+(2*10 padding)+(2*3 border)=400  */
        padding:10px;
        margin:auto;
        border:3px double #000;
        background-color:#fff;
        overflow:auto;         /* allow content to scroll inside element */
        clear:both;
    }
    #page p {
        margin:0;
        padding:10px;
        text-align:justify;
     }
    </style>
    
    </head>
    <body>
    
    <div id="vertical"></div>
    
    <div id="page">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. *** sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
    quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
    diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
    scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
    Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
    rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
    </p>
    </div>
    
    </body>
    
    </html>
    
    
    coothead

  3. #3
    Join Date
    Nov 2008
    Posts
    14
    coothead- thanks for your reply. however with your example when i resize the window so that it is too small for the content I would still like there to be a small space at the top about 2em of the background color before the content box and the same at the bottom a 2em space of the background color. I have tried using margins and padding and i just can't figure it out

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,469
    Hi there devin.crossman,

    in my example, changing these values...
    Code:
    
    body {
        min-width:760px; 
        min-height:400px;
        background-color:#eae7d7;
        text-align:center;
     }
    
    
    ...to these...
    Code:
    
    body {
        min-width:780px;
        min-height:420px;
        background-color:#eae7d7;
        text-align:center;
     }
    
    
    ...will set a 10px margin around the content.

    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles