#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    2
    Rep Power
    0

    Question How to center a webpage and make it expand to fit browser?


    I'm trying to get my webpage to expand horizontally to fit any browser window but still have the content centered in the middle of the page. I managed to do one or the other but cannot for the life of me figure out how to make both work at the same time. If I set width and height to 100% and have the body margins set to 0 auto it works great but then my content is no longer centered and all the divs end up overlapping each other. However, if I set the width to 900px then it's all centered and looks great. But there's white space around it because it's not expanding to fit the browser window.

    Can anyone let me know the trick to making this work? I want it to look like this page where the sides expand to fit the browser but all the content remains centered in the middle:

    Also, here is my CSS:

    Code:
    <style type="text/css">
    body {
    text-align:center;
    margin:0px; 
    padding:0px;
    width:100%;
    height:100%;
    }
    
    body#home a#nav-home,
    body#resume a#nav-resume,
    body#portfolio a#nav-portfolio,
    body#contact a#nav-contact
    {
    color: #dfadec;
    text-decoration:none;
    }
    
    #container {
    background-color:#eae5e5;
    width:900px;
    text-align:left;
    margin: 0 auto;
    height:auto;
    }
    
    #main {
    padding-top:200px !important;
    padding-bottom:120px !important;
    width:900px;
    margin-left: auto;
    margin-right:auto;
    }
    
    #header {
    position:fixed;
    border-top:solid 15px #4d4d4f;
    font-family:Open Sans;
    font-size:30px;
    color:#4d4d4f;
    background-color:#FFF;
    width:900px;
    padding-bottom:45px;
    }
    
    #title {
    padding-top:30px;
    position:absolute;
    margin-left:60px;
    }
    
    #footer {
    color:#FFF;
    position:fixed;
    font-family:Open Sans;
    font-size:12px;
    background-color:#dfadec;
    width:900px;
    padding-bottom:45px;
    padding-top:45px;
    margin: 0 auto;
    height: auto;
    }
    
    #nav {
    padding-top:70px;
    font-size:12px;
    color:#CCC;
    margin-left:570px;
    }
    
    #nav a:link {
    color:#CCC;
    text-decoration:none;
    }
    
    #nav a:hover {
    color:#dfadec;
    text-decoration:none;
    }
    
    h1 {
    font-size:60px;
    font-family:Open Sans;
    color:#4d4d4f;
    margin-top:-150px;
    }
    
    h2 {
    font-size:40px;
    font-family:Open Sans;
    color:#4d4d4f;
    font-weight:normal;
    margin-top:-40px;
    }
    
    #resume {
    background:#5c5c54;
    width:130px;
    height:130px;
    font-family:Open Sans;
    color:#FFF;
    margin-left:5px;
    text-align:center;
    position:absolute;
    -webkit-transition-property:color, background; 
    -webkit-transition-duration: 0.5s; 
    -webkit-transition-timing-function: linear, ease-in; 
    }
    
    #resume p {
    vertical-align:middle;
    padding-top:45px;
    font-size:12px;
    }
    
    #resume:hover {
    background-color:#373732;
    color:#FFF;
    }
    
    #work {
    background:#dfadec;
    width:130px;
    height:130px;
    font-family:Open Sans;
    color:#FFF;
    margin-left:150px;
    text-align:center;
    position:absolute;
    -webkit-transition-property:color, background; 
    -webkit-transition-duration: 0.5s; 
    -webkit-transition-timing-function: linear, ease-in; 
    }
    
    #work p {
    vertical-align:middle;
    padding-top:45px;
    font-size:12px;
    }
    
    #work:hover {
    background-color:#705676;
    color:#FFF;
    }
    
    #skills {
    background:#4d4d4f;
    width:130px;
    height:130px;
    font-family:Open Sans;
    color:#FFF;
    margin-left:295px;
    text-align:center;
    position:absolute;
    -webkit-transition-property:color, background; 
    -webkit-transition-duration: 0.5s; 
    -webkit-transition-timing-function: linear, ease-in; 
    }
    
    #skills p {
    vertical-align:middle;
    padding-top:45px;
    font-size:12px;
    }
    
    #skills:hover {
    background-color:#262628;
    color:#FFF;
    }
    
    img#icon {
    background-color:#4d4d4f; 
    padding:12px;
    }
    
    #intro {
    width: 400px;
    font-family: Open Sans;
    font-size: 12px;
    color: #4d4d4f;
    margin-left: 320px;
    position: absolute;
    left: 500px;
    top: 522px;
    text-align:justify;
    }
    
    </style>

    Any suggestions? Please let me know. And let me know if I need to post the HTML too.. I just figured the problem was in the CSS since that's where I'm defining width, etc.

    Thanks!

    Pooja
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening,

    Your content is set with pixels.

    Think about why that would be a problem when shrinking the browser.

    Kind regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo