SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Location
    Buffalo, NY
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with scalable left/right "margins"

    Hello,
    I recently posted a site that is, for the most part, working the way I want it to. The only issue I have is a presentation problem that happens when the browser is not maximized, and the browser window is manually sized down...

    The site is at:

    http://www.markdivincenzo.com

    I want the content to remain centered no matter what the browser size... when there is more area than is required by that content area, the grey & white horizontal bars should expand to keep the content centered.

    What is happening (as you should be able to see by manually shrinking the browser window) is the right "margin" doesn't always encompass the content, and the left "margin" doesn't shrink proportionally as the width of the browser window decreases. The result is that the content ends up out of line from center, and a horizontal scroll bar appears at the bottom of the browser.

    I would like the content to remain centered at all times, and have the "margins" both resize themselves proportionally with the browser window (when the browser window is the same size as the content, or smaller, only the content should be shown - no margins).

    Here are the styles I am using for the page:

    img {border:0}

    /* These styles apply to all pages (includes header definitions) */
    /* */
    html, body {height:100%; margin:0; padding:0;}
    * html, body {text-align:center;}
    #container {height:100%; width:98%; margin:0 auto; font-family:arial; text-align:left;}
    * html #container {height:100%; width:90%;}
    #wrapper {position:absolute; left:13%; margin:0px auto; top:0px; width:750px;}
    #bannerbk {background-color:#999999; width:100%; min-width:825px; height:92px;}
    #header {position:relative; height:120px; width:100%; min-width:500px;}
    * html #header {width:109%; padding-bottom:5px;}
    #banner {height:47%; color:#FFFFFF; padding-top:35px;}
    #banner img {padding-top:14px;}
    #navbar {height:28px; padding-left:9px;}
    * html #navbar {height:30px;}
    #navbar div {float:left; color:#999999; padding-right:60px; padding-top:5px; font-size:.75em;}


    /* These styles apply to the index page */
    /* */
    #mid {position:relative; height:275px; width:90%; min-width:500px; padding:10px 0 0 9.5%; background-color:#FFFFFF;}
    * html #mid {height:275px; width:100%;}
    #mid div {float:left; padding-left:20px; font-size:.8em;}
    #mid div img {border:0;}
    #mid a {text-decoration:none; color:#000000;}
    #footer {position:relative; min-height:300px; width:91%; min-width:500px; background-color:#999999; color:#FFFFFF; font-size:.8em; padding-left:9%;}
    * html #footer {height:50%; width:100%;}
    #news {float:left; width:600px; padding:20px 0 0 7px; font-size:1.3em;}
    .newsitem {float:left; position:relative; width:250px; padding:10px 15px 0 7px; font-size:.85em;}
    .navlink {color:#999999; text-decoration:none;}
    .navlink:hover {color:#CCCCCC;}
    #credits {float:left; clear:both; text-align:left; padding:80px 0 0 5px; font-size:.85em;}
    * html #credits {padding:60px 0 0 5px;}

    Does anyone have any idea how to correct this ? Thanks in advance for any help you can offer !

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    If it was me i would

    Well i would (no offence meant) scrap what you have done. And start again with a fixed width centred layout.

    Use a background image to emulate the top and bottom colour blocks being full width (create an bg image that is 1600px by 1600px file size will be tiny and it will cater for all resolutions)

    Your content fits into an 800*600 layout nicely and will not need to be squeezed any lower than that for anyone i should not think.

    Then when people resize their browser (anyone with above 800 600 resolution), it will all be in the center at all times.

    It may not be the correct or best answer but that is what i would do if it were me.

    Good luck!

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Location
    Buffalo, NY
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give that a try when I get a little bit of time. Thanks for the suggestion.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You use 2 models mixed together as one ?
    a float model
    a position absolute model

    You use the ID header 2x, I am surprised that is shows something descent like now, PS validate your code it has errors


Bookmarks

Posting Permissions

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