Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centered div, moves when browser scroll bar appears

    or something like that. Don;t know what to search for on this one.

    Anyway. The basic problem is I would like to create a center aligned main div. With this code that is possible, however, when the content in the center_content div runs longer than the page, the browser scrollbar pushes the global div to the left.

    How do I fix this? I want the the website to be centered, but not to frigging jump if the content happens to be longer. Want to stay away from scrollable divs. Cheers


    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>
    </head>
    
    <body>
    <div id="global">
    <div id="banner"></div>
    <div id="centercontent"></div>
    </div>
    </body>
    </html>

    CSS

    Code:
    body {
    font:12px/1.2 Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    margin:0px 0px 0px 0px;
    padding:0px;
    background:#FFF;
    } 
    
    #global {
    margin-left:auto; margin-right: auto;
    width:500px; 
    text-align: left;
    }
    
    #banner { 
    margin-left:0px;
    height:50px;
    background-color:#fff;  
    }
    
    #centercontent {
    margin-top: 0px;
    width:600px;height:90%;
    background-color:#fff;
    }

  • #2
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The only fix would be to somehow give a min-height to your global div so that there always is a scrollbar.

    On the other hand, not many users will notice it.

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Funnily enough I bookmarked this page the other day -

    http://www.communitymx.com/content/a....cfm?cid=528A0

  • #4
    New Coder
    Join Date
    Jun 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mark87
    Funnily enough I bookmarked this page the other day -

    http://www.communitymx.com/content/a....cfm?cid=528A0
    Thanx, that's what I was looking for.

    Although the unsightely scrollbar on my opening page.

    It is better than it was though. :-) and will allow me to build the rest of the site. Yeah tried positioning absolute, fixed.
    Could run the scrollbar on the center div, but don't think people will enjoy that too much.

    The updated css would then be:

    Code:
    body {
    font:12px/1.2 Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    margin:0px 0px 0px 0px;
    padding:0px;
    background:#FFF;
    } 
    
    html { min-height: 100%; margin-bottom: 1px; }
    
    #global {
    margin-left:auto; margin-right: auto;
    width:500px; 
    text-align: left;
    }
    
    #banner { 
    margin-left:0px;
    height:50px;
    background-color:#fff;  
    }
    
    #centercontent {
    margin-top: 0px;
    width:600px;height:90%;
    background-color:#fff;
    }
    Last edited by Dolphin123; 12-07-2005 at 03:50 PM.


  •  

    Posting Permissions

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