SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Manchester, UK
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question stretch full width problem

    hi guys,

    should be an easy one this i think! i'm (still) having problems with the layout of my latest design escapade:

    http://www.wcobfc.co.uk/wcobfc.asp

    the problem occurs when you shrink the size of the browser window to less than 800 pixels in width. if you use the horizontal scroll bar to see the right side of the page you'll notice that the nav and footer bars end at 800px. what do I need to change in my css to get it to stretch the entire width??

    oh, this problem doesn't occur on ie but is present on mozilla

    cheers
    Last edited by rigadon; Sep 29, 2003 at 05:02.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The problem is the mixture of fluid and fixed wisths that you have used.

    Your footer is set to 100% which means that it will occupy 100% of the screen width (ie. the viewport). When you resize your browser window smaller then the 100% is still the width of the visible viewport.

    However your fixed content is wider than the viewport so a horizontal scrollbar appears. Now the width of your actual content is wider than the viewport which makes it 100% of the viewport plus the amount you need to scroll. For examples sake your content width is now 130% wide but your footer is set to 100%.

    Mozilla correctly interprets 100% as 100% but ie seems to adjust the width as the browser is resized.

    It seems the best way to get around this would be either to set the footers to the same width as your content or to make the whole design fluid (e.g.100% wide.)

    I've made a few changes to show you what I mean although you will still need to work it a bit more.
    Code:
    body {
     COLOR: #606060;
     FONT-FAMILY: arial, helvetica, sans-serif;
     FONT-SIZE: 10pt
    }
    td {
     COLOR: #606060;
     FONT-FAMILY: arial, helvetica, sans-serif;
     FONT-SIZE: 10pt
    }
    a {
     COLOR: #306090;
     TEXT-DECORATION: none;
    }
    a:hover {
     TEXT-DECORATION: underline;
    }
    img { border: none; }
    #header {
     height: 50px;
     width: 100%;
    }
    #navBarBack {
     background: #f8f8f8;
     border-top: 1px solid #c0c0c0;
     border-bottom: 1px solid #c0c0c0;
    }
    #navBar {
     height: 20px; 
    }
    .navBarSpacer {
     float: left;
     width: 30px;
     height: 20px;
     background: #f8f8f8;
     border-right: 1px solid #c0c0c0;
    }
    .navBarLinkSelected {
     float: left;
     width: 100px;
     height: 20px;
     font-weight: bold;
     background: #369;
     text-align: center;
     border-right: 1px solid #c0c0c0;
    }
    .navBarLinkSelected a {
     text-decoration: none;
     color: #fff;
    }
    .navBarLinkSelected a:hover {
     text-decoration: none;
     color: #000;
    }
    .navBarLink {
     float: left;
     width: 100px;
     height: 20px;
     font-weight: bold;
     background: #f8f8f8;
     text-align: center; 
     border-right: 1px solid #c0c0c0;
    }
    .navBarLink a {
     text-decoration: none;
     color: #369;
    }
    .navBarLink a:hover {
     text-decoration: none;
     color: #000;
    }
    #content {
     clear:both;
    }
    #left {
     width: 130px;
     float: left; 
     border: 1px solid #c0c0c0
    }
    #main {
     margin-right: 170px;
     margin-left: 140px;
     padding: 5px;
     border: 1px solid #c0c0c0
    }
    #right {
     width: 150px;
     float: right;
     padding: 5px;
     background: #f8f8f8;
     border: 1px solid #c0c0c0
    }
    #footerBack {
     clear: both;
     height: 20px;
     background: #f8f8f8;
     border-top: 1px solid #c0c0c0;
     border-bottom: 1px solid #c0c0c0;
    }
    #footer {
     height: 20px; 
    } 
    .leftBarBox {
     line-height: 10px;
     width: 130px;
     padding: 5px 15px;
     background: url(images/leftBarBoxBack.gif);
     background-repeat: repeat-y;
    }
    .leftBarBoxTop {
     height: 10px;
     background: url(images/leftBarBoxTop.gif);
     background-repeat: no-repeat;
    }
    .leftBarBoxBottom {
     height: 10px;
     background: url(images/leftBarBoxBottom.gif);
     background-repeat: no-repeat;
    }
    BTW always test with a doctype in place otherwise you are asking for more problems later on.

    Hope this helps.

    Paul


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
  •