Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
Like Tree1Likes
  • 1 Post By Pete Holter

Thread: Website has extra room right of my mainbox

  1. #1
    Junior Member
    Join Date
    Nov 2013
    Posts
    1
    Member #
    37729

    Website has extra room right of my mainbox

    I have built a website for a law firm but after it being done i noticed that there is a large amount of space to the right of my main box that i created everything in.
    So you can basically scroll to the right more than you should

    I looked through my code but couldn't find anything.

    You can look for yourself @ BradtLuciani | HOME

    Any help would be awesome! And much appreciated.

    MY CSS

    #bigbox {
    background-image: url(../images/BL_webcomp_1.gif);
    height: 768px;
    width: 1366px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
    }
    a:link {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFF;
    }
    a:link {
    }
    body {
    background-color: #333;
    background-image: url();
    background-repeat: no-repeat;

    }
    #navigationbox {
    height: 36px;
    width: 1366px;
    padding-left: 748px;
    }
    #navspaceholder {
    height: 156px;
    width: 1366px;
    }

    #leftcontent {
    height: 499px;
    width: 550px;
    padding-left: 38px;
    float: left;
    padding-top: 41px;
    }
    #maincontent {
    height: 540px;
    width: 1008px;
    margin-right: auto;
    margin-left: auto;
    }
    #footerbox {
    height: 37px;
    width: 1366px;
    float: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFF;
    text-align: center;
    margin-top: 8px;
    }
    #verticleline {
    background-image: url(../images/verticlebar.png);
    background-repeat: no-repeat;
    float: left;
    height: 539px;
    width: 23px;
    }
    #rightcontent {
    background-image: url(../images/righbox.png);
    background-repeat: no-repeat;
    float: right;
    height: 499px;
    width: 369px;
    padding-top: 41px;
    padding-left: 43px;
    }
    #righttextbox {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    height: 70px;
    width: 337px;
    margin-bottom: 15px;
    }
    #lefttextbox {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 97px;
    width: 544px;
    margin-bottom: 10px;
    }
    #leftimage {
    background-image: url(../images/contactimageleft.png);
    background-repeat: no-repeat;
    height: 540px;
    width: 569px;
    float: left;
    }
    #contactrightcontent {
    height: 510px;
    width: 300px;
    padding-top: 30px;
    float: left;
    }
    #contactrighttext {
    font-family: Verdana, Geneva, sans-serif;
    height: 255px;
    width: 236px;
    font-size: 11px;
    }
    p {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    }
    h1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    }
    h2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    }
    #bigbox #maincontent #contactrightcontent #contactrighttext {
    font-size: 12px;
    }
    #placeholder {
    height: 83px;
    width: 1008px;
    }
    #barplaceholder {
    background-image: url(../images/barplaceholder.png);
    background-repeat: no-repeat;
    height: 37px;
    width: 1008px;
    }
    #picturebox {
    height: 393px;
    width: 983px;
    padding-left: 25px;
    }
    #bradtbox {
    background-image: url(../images/wbradt_image.png);
    background-repeat: no-repeat;
    height: 540px;
    width: 503px;
    float: left;
    }
    #rightbradtbox {
    height: 499px;
    width: 504px;
    float: right;
    padding-top: 41px;
    }
    #bradttext {
    height: 238px;
    width: 346px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    }
    a:link {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFF;
    }
    #lucianipicture {
    background-image: url(../images/dlucianiimage.png);
    float: left;
    height: 540px;
    width: 503px;
    }
    #rightlucianibox {
    height: 499px;
    width: 504px;
    padding-top: 41px;
    float: right;
    }
    #lucianitext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 238px;
    width: 346px;
    }
    a:visited {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFF;
    text-decoration: none;
    }
    a:link {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFF;
    text-decoration: none;
    }
    #stefleftbox {
    background-image: url(../images/sschraderimage.png);
    height: 520px;
    width: 503px;
    float: left;
    }
    #simmonsleftbox {
    background-image: url(../images/csimmonsimage.png);
    height: 540px;
    width: 503px;
    float: left;
    }
    #rightsimmonsbox {
    height: 499px;
    width: 504px;
    padding-top: 41px;
    float: right;
    }
    #simmonstext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 238px;
    width: 346px;
    }
    #steftext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 238px;
    width: 346px;
    }
    #rightstefbox {
    height: 499px;
    width: 502px;
    padding-top: 41px;
    float: right;
    }
    #johnleftbox {
    background-image: url(../images/johnimage.png);
    height: 540px;
    width: 503px;
    float: left;
    }
    #johnrightbox {
    height: 499px;
    width: 504px;
    padding-top: 41px;
    float: right;
    }
    #johntext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 238px;
    width: 346px;
    }
    #contentleftbox {
    background-image: url(../images/servicesimage.png);
    height: 540px;
    width: 503px;
    float: left;
    }
    #servicesplaceholder {
    height: 49px;
    width: 253px;
    float: left;
    }
    #servicesrightbox {
    float: right;
    height: 499px;
    width: 504px;
    padding-top: 41px;
    }
    #titleconleft {
    height: 463px;
    width: 399px;
    padding-top: 77px;
    padding-left: 132px;
    }
    #titlecontext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 108px;
    width: 400px;
    }
    #titlenewleft {
    height: 463px;
    width: 399px;
    padding-top: 77px;
    padding-left: 132px;
    }
    #titlenewtext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 108px;
    width: 400px;
    }
    #titleinsleftbox {
    height: 485px;
    width: 405px;
    padding-top: 55px;
    padding-left: 92px;
    }
    #titleinstext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
    height: 290px;
    width: 406px;
    }
    #abstractleftbox {
    height: 482px;
    width: 571px;
    padding-top: 58px;
    padding-left: 92px;
    float: left;
    background-image: url(../images/abstractline.png);
    }
    #abstractrightbox {
    height: 482px;
    width: 343px;
    padding-top: 58px;
    float: right;
    }
    #abstracttext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    height: 104px;
    width: 409px;
    }

  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2013
    Posts
    1
    Member #
    37785
    Liked
    1 times
    Hi!

    The left padding of your #navigationbox rule is being added to the width (748 + 1366 = HUGE!!!).

    You can do this:

    #navigationbox {
    height: 36px;
    width: 618px;
    padding-left: 748px;
    }

    Or you can just get rid of the width:

    #navigationbox {
    height: 36px;
    padding-left: 748px;
    }

    Or you can also set box-sizing to border-box and leave the numbers alone:

    #navigationbox {
    box-sizing: border-box;
    -moz-box-sizing: border-box; // This line is for Firefox
    height: 36px;
    width: 1366px;
    padding-left: 748px;
    }

    That’ll do it!

    In Christ,
    Pete
    Fireproofgfx likes this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com