CODEWITHSUNDEEP
htmlcss
Shedlor
Shedlor

Reputation: 85

Unwanted Space next to main content on website

So next to the main content (outside of the browser width) if you scroll to the left of the page there is extra space occupied by only the background of the Body CSS background. Here's the site in action http://test.crows-perch.com/. 

@charset "utf-8";
/* CSS Document */
body {
    z-index: 0;
    background: url(../images/background-texture%20d.jpg);
    width: 100%;
}
#page {
    z-index: 1;
    width: 1000px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#Footer {
    width: 100%;
    height: 230px;
    position: absolute;
    left: 0px;
}
#TopLinks {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    margin: 0;
    height: 37px;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    background: url(../images/background-texture-b.jpg);
}
#Links {
    position: relative;
    top: 5px;
    left: 329px;
    text-align: center;
}
#Links a {
    text-decoration: none;
    color: #7F7F7F;
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    font-size: 13px;
}
#Links a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
#HeaderContainer {
    z-index: 3;
    position: absolute;
    top: 28px;
    left: 0px;
    width: 100%;
    height: 65px;
    margin: 0;
    background: url(../images/tri-button%20texture%20b.jpg);
    border-style: solid;
    border-width: 1px;
    border-color: #7F7F7F;
}
#title {
    z-index: 4;
    position: relative;
    width: 252px;
    height: 70px;
    margin: 0 auto;
    top: -10px;
    right: 383px;
}
#Home {
    z-index: 4;
    position: relative;
    width: 96px;
    height: 65px;
    margin: 0 auto;
    right: 204px;
    top: -70px;
    background: url(../images/button%20texture%20b.jpg);
    border-style: solid;
    border-width: 1px;
    border-color: #7F7F7F;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
#Home:hover {
    width: 96px;
    background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
    background-size: cover;
}
#HomeT {
    text-decoration: none;
    font-family: "Cinzel Regular";
    font-size: 18px;
    letter-spacing: 1px;
    color: #D2C300;
    line-height: 65px;
    vertical-align: middle;
}
a.Home {
    text-decoration: none;
    height: 65px;
}
#Guides {
    z-index: 4;
    position: relative;
    margin: 0 auto;
    top: -135px;
    right: 89px;
    width: 133px;
    height: 65px;
    background: url(../images/button%20texture%20b.jpg);
    border-style: solid;
    border-width: 1px;
    border-color: #7F7F7F;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
#Guides:hover {
    width: 133px;
    background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
    background-size: cover;
}
#GuidesT {
    text-decoration: none;
    font-family: "Cinzel Regular";
    font-size: 18px;
    letter-spacing: 1px;
    color: #D2C300;
    line-height: 65px;
    vertical-align: middle;
}
a.Guides {
    text-decoration: none;
}
#Forum {
    z-index: 4;
    position: relative;
    margin: 0 auto;
    top: -200px;
    left: 33px;
    width: 114px;
    height: 65px;
    background: url(../images/button%20texture%20b.jpg);
    border-style: solid;
    border-width: 1px;
    border-color: #7F7F7F;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
#Forum:hover {
    width: 114px;
    background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
    background-size: cover;
}
#ForumT {
    text-decoration: none;
    font-family: "Cinzel Regular";
    font-size: 18px;
    letter-spacing: 1px;
    color: #D2C300;
    line-height: 65px;
    vertical-align: middle;
}
a.Forum {
    text-decoration: none;
}
#Blog {
    z-index: 4;
    position: relative;
    margin: 0 auto;
    top: -265px;
    left: 141px;
    width: 102px;
    height: 65px;
    background: url(../images/button%20texture%20b.jpg);
    border-style: solid;
    border-width: 1px;
    border-color: #7F7F7F;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
#Blog:hover {
    width: 102px;
    background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
    background-size: cover;
}
#BlogT {
    text-decoration: none;
    font-family: "Cinzel Regular";
    font-size: 18px;
    letter-spacing: 1px;
    color: #D2C300;
    line-height: 65px;
    vertical-align: middle;
}
a.Blog {
    text-decoration: none;
}
#Guilds {
    z-index: 4;
    position: relative;
    margin: 0 auto;
    top: -330px;
    left: 262px;
    width: 138px;
    height: 65px;
    background: url(../images/button%20texture%20b.jpg);
    border-style: solid;
    border-width: 1px;
    border-color: #7F7F7F;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
#Guilds:hover {
    width: 138px;
    background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
    background-size: cover;
}
#GuildsT {
    text-decoration: none;
    font-family: "Cinzel Regular";
    font-size: 18px;
    letter-spacing: 1px;
    color: #D2C300;
    line-height: 65px;
    vertical-align: middle;
}
a.Guilds {
    text-decoration: none;
}
#Play {
    z-index: 4;
    position: relative;
    margin: 0 auto;
    width: 168px;
    height: 65px;
    top: -395px;
    left: 415px;
    background: url(../images/button%20texture%20bright.jpg);
    background-size: cover;
    border-style: solid;
    border-width: 1px;
    border-color: #7F7F7F;
    border-top: none;
    border-bottom: none;
    text-align: center;
}
#Play:hover {
    width: 168px;
    background: url(../images/button%20overlay%20c.png) no-repeat center, url(../images/button%20texture%20bright.jpg) no-repeat top left;
    background-size: cover;
}
#PlayT {
    text-decoration: none;
    font-family: "Cinzel Bold";
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    line-height: 64px;
    vertical-align: middle;
}
a.Play {
    text-decoration: none;
}
#Top-Gradient {
    z-index: 6;
    position: absolute;
    top: 95px;
    left: 0px;
    width: 100%;
    height: 25px;
    margin: 0;
    background: url(../images/gradient.png) repeat-x;
}
#PictureContainer-top {
    z-index: 5;
    position: absolute;
    top: 95px;
    left: -2px;
    width: 100%;
    height: 423px;
    margin: 0;
    background: url(../images/fire%20bg%20art.jpg) center no-repeat;
    background-size: 100%;
}
#G1 {
    z-index: 6;
    width: 1037px;
    height: 19px;
    left: -19px;
    top: 194px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    opacity: 0.5;
    position: relative;
}
#ContentTop {
    z-index: 6;
    position: relative;
    margin: 0 auto;
    background: url(../images/tri-button%20texture.jpg) repeat-x center top;
    width: 1037px;
    height: 49px;
    left: -19px;
    top: 173px;
    -webkit-box-shadow: 0px 0px 17px -1px #000000;
    box-shadow: 0px 0px 17px #000000;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
}
#SwordL {
    margin-bottom: 17px;
    margin-left: 9px;
}
#TeamUp {
    z-index: 6;
    position: relative;
    margin: 0 auto;
    top: -23px;
    left: 96px
}
#SwordR {
    margin-bottom: 15px;
    margin-left: -9px;
}
#G2 {
    z-index: 6;
    width: 1039px;
    height: 19px;
    top: -60px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    position: relative;
    margin: 0 auto;
}
#ContentAfterTop {
    z-index: 9;
    width: 1011px;
    height: 35px;
    top: -60px;
    position: relative;
    margin: 0 auto;
    webkit-box-shadow: 6px 6px 43px -1px #000000;
    box-shadow: 6px 6px 43px #000000;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    position: relative;
    background: url(../images/tri-button%20texture.jpg) repeat left top;
}
#G3 {
    z-index: 5;
    width: 267px;
    height: 19px;
    position: relative;
    margin: 0 auto;
    left: -633px;
    top: 120px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    opacity: 0.5;
    -webkit-transform: matrix(0, -1, 1, 0, 124, 143);
    -ms-transform: matrix(0, -1, 1, 0, 124, 143);
    -o-transform: matrix(0, -1, 1, 0, 124, 143);
    transform: matrix(0, -1, 1, 0, 124, 143);
}
#G3-2 {
    z-index: 5;
    width: 269px;
    height: 19px;
    margin-top: 400px;
    left: 730px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    opacity: 0.5;
    -webkit-transform: matrix(0, 1, -1, 0, 144, -125);
    -ms-transform: matrix(0, 1, -1, 0, 144, -125);
    -o-transform: matrix(0, 1, -1, 0, 144, -125);
    transform: matrix(0, 1, -1, 0, 144, -125);
    position: relative;
}
#AfterPicBreak {
    z-index: 6;
    height: 240px;
    border-color: #000000;
    background: url(../images/bg%20texture%20top.jpg) repeat-x left top;
    position: absolute;
    margin: 0 auto;
    top: 485px;
    left: 0px;
    width: 100%;
}
#G4 {
    z-index: 5;
    height: 92px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 430px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
}
#G5 {
    z-index: 6;
    width: 999px;
    height: 19px;
    position: relative;
    margin: 0 auto;
    right: 999px;
    top: -247px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    -webkit-transform: matrix(-1, 0, 0, -1, 999, 19);
    -ms-transform: matrix(-1, 0, 0, -1, 999, 19);
    -o-transform: matrix(-1, 0, 0, -1, 999, 19);
    transform: matrix(-1, 0, 0, -1, 999, 19);
}
#ContentBreak {
    z-index: 5;
    background: url(../images/break%20-%20large.jpg) repeat-x left top;
    position: relative;
    left: 0px;
    top: -260px;
    width: 999px;
    height: 61px;
}
#Content {
    z-index: 7;
    background: url(../images/content%20bg.jpg) repeat left top;
    position: relative;
    top: -268px;
    left: 0px;
    width: 999px;
    height: 88px;
    padding-bottom: 700px;
}
#G6 {
    z-index: 8;
    position: relative;
    margin: 0 auto;
    top: -1078px;
    left: -997px;
    width: 996px;
    height: 19px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    -webkit-transform: matrix(-1, 0, 0, -1, 996, 19);
    -ms-transform: matrix(-1, 0, 0, -1, 996, 19);
    -o-transform: matrix(-1, 0, 0, -1, 996, 19);
    transform: matrix(-1, 0, 0, -1, 996, 19);
}
#LinkText {
    z-index: 7;
    position: relative;
    top: -1040px;
    text-align: center;
    width: 100%;
}
#LinkText a {
    font-size: 23px;
    color: #D2C300;
    font-family: "Cinzel Regular";
    font-weight: 700;
    font-size: 23px;
    text-decoration: none;
}
#ContentSmallBreak {
    z-index: 7;
    background: url(../images/small%20break.jpg) repeat-x left top;
    width: 999px;
    height: 34px;
    position: relative;
    margin: 0 auto;
    top: -1010px;
}
#BottomG {
    z-index: 6;
    background: url(../images/bg%20texture%20bottom.jpg) repeat-x center bottom;
    width: 100%;
    height: 247px;
    position: relative;
    top: -140px;
    left: 0px;
}
#G7 {
    z-index: 10;
    height: 19px;
    width: 100%;
    position: relative;
    left: 0px;
    top: -156px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
}
#FooterBreak {
    z-index: 8;
    background: url(../images/break%20-%20large.jpg) repeat-x left top;
    height: 54px;
    position: relative;
    left: 0px;
    top: -158px;
    width: 100%;
}
#FooterBG {
    z-index: 6;
    background: url(../images/parchment.jpg) repeat-x;
    width: 100%;
    height: 149px;
    position: relative;
    left: 0px;
    top: -158px;
}
#FooterBreak2 {
    z-index: 12;
    background: url(../images/FooterBreak.jpg);
    width: 100%;
    height: 11px;
    position: relative;
    left: 0px;
    top: -158px;
}
@font-face {
    font-family: 'Cinzel Regular';
    src: url('../fonts/cinzel-regular-webfont.eot');
    src: url('../fonts/cinzel-regular-webfont.woff') format('woff'), url('../fonts/cinzel-regular-webfont.svg') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Cinzel Bold';
    src: url('../fonts/cinzel-regular-bold.eot');
    src: url('../fonts/cinzel-regular-bold.woff') format('woff'), url('../fonts/cinzel-regular-bold.svg') format('svg');
    font-weight: 400;
    font-style: normal;
}

Upvotes: 0

Views: 41

Answers (2)

aaronk6
aaronk6

Reputation: 2811

The main reason for this is the div with the ID Links. By default, is has a 100% width. Then you push it to the right by 329px (using left: 329px). These 329px are the amount of unwanted space you get.

Instead, you’ll probably want to do something like this:

#Links {
    position: relative;
    top: 5px;
    text-align: right;
    width: 1011px;
    margin: 0 auto;
}

You’ll then still have two additional pixels. These are caused by the borders of #TopLinks and #HeaderContainer. You can fix this by either setting box-sizing: border-box or by getting rid of the 100% width and setting right: 0 instead.

Upvotes: 1

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

I don't see any space to the left of the content, the space to the right is caused by the way you position elements: if you shift block elements to the right setting left property, they keep their width and need some space outside of the screen. You need to either set the width manually or change their display property toinline-block (start with #Links, you'll see what I'm talking about).

Upvotes: 1

Related Questions