margin on right of page

[justint24]

I have a large white margin area on the right of my website and can’t figure out why its there, can someone have look please.
My website, http://www.webbid.co.uk

css code :-

@charset "utf-8";

/* CSS Document */



@media screen and (-webkit-min-device-pixel-ratio:0){

#div {margin-left: 10px;}

}

body {

width: 100%;

margin: 0;

padding: 0;

background-color: #ffffff;

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;

color: #010101;

}

#header {

position: relative;

height: 130px;

background-color: #242424;

}

#header h1 {

margin: 0 0 0 15px; padding: 48px 0 0 0;

width: 400px; height: 50px;

background: right bottom no-repeat url(../../template/GreenAndBlack/img/bcklogo1.png);

font-size: 0;

text-indent: -99999em;

}

#header h1 a {

display: block;

width: 100%; height: 100%;

}

#header ul {

position: absolute;

margin: 0; padding: 0;

list-style-type: none;

}

#header .primary {

right: 0; bottom: 0;

}

#header .primary li {

float: right;

font-size: 13px; font-weight: bold;

}

#header .primary li a {

float: right;

margin: 0px; padding: 0px;

line-height: 38px;

color: #fff;

text-decoration: none;

}

#header .primary li a:hover {

background: repeat-x url(../../template/GreenAndBlack/img/bckprimarylink.png);

}

#header .secondary {

font-size: 13px;

font-weight:bold;

color: #ffffff;

right: 40px;

top: 20px;

}

#header .secondary li {

font-family: Verdana, Arial, Helvetica, sans-serif;

margin: 0 5px;

font-size: 12px;

font-weight:bold;

display: inline;

color: #e1e1e1;

right: 20px;

top: 25px;

}

#header .secondary li a {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight:bold;

font-size: 12px;

margin: 0 5px;

color: #e1e1e1;

text-decoration: none;

right: 20px;

top: 25px;

}

#header .secondary li:hover  {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight:bold;

font-size: 12px;

margin: 0 5px;

color: #e1e1e1;

text-decoration: none;

right: 20px;

top: 25px;

}

#panel {

padding: 3px 25px 0px 15px;

height: 64px;

background: no-repeat url(../../template/GreenAndBlack/img/img02.jpg);

border-top: #e4e4e4 0px solid; border-bottom: #e4e4e4 0px solid;

}

#panel ul {

float: left;

margin: 20px 0 0 0; padding: 0 10px 0 0;

list-style-type: none;

width: 600px;

}

#panel li {

display: inline;

font-size: 17px; font-weight: bold;

}

#panel li a {

color: #ffffff;

text-decoration: none;

}

#panel form {

float: right;

margin: 15px 0 0 0;

}

#panel form * {

vertical-align: middle;

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;

font-weight: bold;

color: #242424;

}

#panel form .text {

margin: 0 5px 0 0; padding: 5px;

width: 200px;

background-color: #fff;

border: #e1e1e1 1px solid;

border-style: inset;

}

#panel form .btn {

padding: 6px 0px 9px 0px;

width: 85px;

height: 29px;

background: url(../../template/GreenAndBlack/img/bckpanelformbtn.png);

color: #ffffff;

border: none;

cursor: pointer;

}

#panel form .btn:hover{

padding: 6px 0px 9px 0px;

width: 85px;

height: 29px;

background: url(../../template/GreenAndBlack/img/bckpanelformbtn.png);

color: #ffffff;

border: none;

cursor: pointer;

}

#container {

padding: 20px 0;

width: 100%;

background-color: #ffffff;

}

#container:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

#sidebar {

float: right;

padding: 0 15px 0 0;

width: 220px;

}

#sidebar .box {

margin:0px 0px 0px 0px; padding: 15px 10px 10px 10px;

background: url(../../template/GreenAndBlack/img/sidebox.png);

}

#sidebar ul {

margin: 0; padding: 0;

list-style-type: none;

}

#sidebar h3 {

background: url(../../template/GreenAndBlack/img/sideboxh3.png);

font-size: 12px;

}

#sidebar a {

color: #333333;

text-decoration: none;

}

#contentcontainer {

float: left;

width: 100%;

margin: 0 -250px 0 0;

}

#content {

margin: 0 250px 0 15px;

}

#content a {

color: #333333;

text-decoration: none;

}

#content a: hover {

color: #56a5ec;

text-decoration: none;

}

#footer {

color: #ffffff;

padding: 15px 50px 15px 50px;

background-color: #242424;

font-size: 12px;

}

#footer a {

color: #ffffff;

text-decoration: none;

}

#footer a:hover{

color: #ffffff;

text-decoration: underline;

}

#footer ul {

margin: 0 0 5px 0; padding: 0;

list-style-type: none;

}

#footer li {

display: inline;

}



#welcome {

margin: 0 0 8px 0;

}

#welcome h1 {

font-size: 16px;

}

.clearfloat {

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

#central {

padding: 0 15px;

background-color: #ffffff;

border: #e4e4e4 0px solid;

}

#central h1 {

margin: 0 -15px 0px -15px; padding: 5px 0;

background-color: #ffffff;

border-bottom: #e0e0e0 0px solid;

text-align: center;

font-size: 16px;

color: #333333;

}

#central hd {

color: #e1e1e1;

height: 2px;

border: none;

border-top: #e1e1e1 2px solid;

}

#central hr {

background: url(../../template/GreenAndBlack/img/panelshadow.png);

color: #ffffff;

height: 30px;

border: none;

border-top: #cccccc 0px solid;

}

#central #sumitlink {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 15px;

color: #56a5ec;

text-decoration: none;

font-weight: bold;

}

#central #sumitlink a:link {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 15px;

color: #333333;

text-decoration: none;

font-weight: bold;

}

#central #sumitlink a:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 15px;

color: #666666;

text-decoration: none;

font-weight: bold;

}

#central #sumitlink a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 15px;

color: #666666;

text-decoration: none;

font-weight: bold;

}

#central #friends {

background: repeat-x url(../../template/GreenAndBlack/img/frbck.png);

border-top: #dddddd 1px solid;

border-right: #666666 1px solid;

border-bottom: #666666 1px solid;

border-left: #dddddd 1px solid;

padding:6px 5px 6px 5px;

font-size: 14px;

color: #333333;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

#central #friends a:link {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #333333;

text-decoration: none;

font-size: 11px;

}

#central #friends a:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #333333;

text-decoration: none;

font-size: 11px;

}

#central #friends a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #333333;

text-decoration: underline;

font-size: 11px;

}

#details img {

border: none;

}



#soc {

margin: 15px auto 0 auto; padding: 5px;

text-align: left;

}



#sbf {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

}

#sbf input {

border: 1px solid #cccccc;

border-style: inset;

color: #242424;

}

#sbf select {

border: 1px solid #cccccc;

border-style: inset;

color: #242424;

}

#sbf textarea {

border: 1px solid #cccccc;

border-style: inset;

color: #242424;

}

.style3 {font-size: 11px}#listingdt {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

}

.style1x {font-size: 11px}

#gene {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

#gene a:link {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #242424;

text-decoration: none;

}

#gene a:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #242424;

text-decoration: none;

}

#gene a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #56a5ec;

text-decoration: underline;

}

a img {

border:none;

}

.outer a, .outer div, .outer li, .outer ul, .outer body{

margin: 0;

padding: 0;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

[jamygolden]

Also, you should use a css reset.

[Sirlon]

Took a quick look, nothing found.

ps: Marking content begin and end ok but why that way , a small note would be enough ^^

[justint24]

Hi all, thanks for your comments,

first of all i’m not a web designer, i got my website/script which was already made, i and a few people i know say my work on the website is fantastic to what it was when i got it, i know very little html/css but i am learning very fast, so please be patient and bare with me.

wolfcry911- i didnt know i had any errors or wrong in any of my code as i just check the design through several browsers.

Sirlon what do you mean- Marking content begin and end ok but why that way

Thanks
Justin

[clokey2k]

I think that the white margin you are seeing is due to the a-z index banner image (img02.jpg) only being 1010px wide. Anything larger and the search box hovers over empty space.

[justint24]

Hi clokey2k

Thanks but i don’t think that’s the problem as i have just changed that image to an earlier one i used the for the panel, the code is now –

#panel {
padding: 0px 25px 0px 15px;
height: 60px;
background: repeat-x url(../../template/GreenAndBlack/img/bckpanel.png);
border-top: #e4e4e4 1px solid; border-bottom: #e4e4e4 1px solid;
}

and the problem remains

thanks

[jamygolden]

It’s the way you’ve created the navigation area. You should find a new way to do it.

(remove ul#nav and the problem will disappear)

[justint24]

Thank you everyone for your comments,

i have fixed the problem, i removed the ul.dropdown class from my nav menu code and replaced it with ul#nav, voila.

Thanks again everyone.

jamy-za if i remove ul#nav my nav menu will float to the left hand side instead of right as i want it to.

[jamygolden]

@justint24 when I said remove ul#nav, I mean remove ul#nav and all of its children. You would have no menu at all if you removed it – This was to show that the nav was causing the problem.

[Author]

Posts