Margin trouble with right side bar......

[Bombstriker]

- Alright I have been working on this right side bar for quite some time now and I can't seem to get rid of this margin issue. I assume this is a css problem, I am not 100% that it is a margin issue though. Here is a picture of my mock up, (I don't have my site up yet) the problem I am having are those images in the right column. The page is supposed to end there but it leaves a TON of room on the right side of the page....

 

 

- Here is my css, now I have a bunch of margin spacing in there because it took forever to get those images lined up like that on the left. I am fairly new to web design so I wasn't sure of an easier method. Anyways here is my entire css document. I am just stuck on how to get all that spacing out of there and tighten it up. Any help would be AMAZING!!!

 

* {
   margin: 0;
   padding: 0;
}

p,li {
   font-size: 1.3em;
   line-height: 1.3em;
   margin-bottom: 0.8em;
}

h1 { font-size: 2.0em; margin-top: 22px; text-indent: 23px; }
h9 { font-size: 1.0em;}

.clear { clear: both;}

/* HEADER*/

div#page-wrap {
   width: 1033px;
   margin: 0 auto;
}

ul#nav {
   height: 28px; width: 1033px;
   background: url(images/mainheader.jpg) no-repeat;
}

#header ul {width: 1033px; height: 28px;
   list-style: none;
   padding-left: 15px;
   }

#header ul li{float:left}

#header ul li.home{width: 98px; height: 63px; margin-right: 0px;}
#header ul li.home a{width: 98px; height: 63px; display:block; background:url(images/nav_home.jpg) no-repeat; text-indent:-200000px;}
#header ul li.home a:hover{width: 98px; height: 63px; background:url(images/nav_home_over.jpg) no-repeat;}

#header ul li.forums{width: 93px; height: 63px; margin-left: 0px;}
#header ul li.forums a{width: 93px; height: 63px; display:block; background:url(images/nav_forums.jpg) no-repeat; text-indent:-200000px;}
#header ul li.forums a:hover{width: 93px; height: 63px; background:url(images/nav_forums_over.jpg) no-repeat;}

#header ul li.profiles{width: 94px; height: 63px; margin-left: 0px;}
#header ul li.profiles a{width: 94px; height: 63px; display:block; background:url(images/nav_profiles.jpg) no-repeat; text-indent:-200000px;}
#header ul li.profiles a:hover{width: 94px; height: 63px; background:url(images/nav_profiles_over.jpg) no-repeat;}

#header ul li.corporate{width: 109px; height: 63px; margin-left: 0px;}
#header ul li.corporate a{width: 109px; height: 63px; display:block; background:url(images/nav_corp.jpg) no-repeat; text-indent:-200000px;}
#header ul li.corporate a:hover{width: 109px; height: 63px; background:url(images/nav_corp_over.jpg) no-repeat;}

#header ul li.title{width: 214px; height: 72px; margin-left: 0px;}
#header ul li.title a{width: 214px; height: 72px; display:block; background:url(images/ofatitleheader.jpg) no-repeat; text-indent:-200000px;}

#header ul li.ncaa{width: 78px; height: 63px; margin-left: 0px;}
#header ul li.ncaa a{width: 78px; height: 63px; display:block; background:url(images/nav_ncaa.jpg) no-repeat; text-indent:-200000px;}
#header ul li.ncaa a:hover{width: 78px; height: 63px; background:url(images/nav_ncaa_over.jpg) no-repeat;}

#header ul li.mlb{width: 84px; height: 63px; margin-left: 0px;}
#header ul li.mlb a{width: 84px; height: 63px; display:block; background:url(images/nav_mlb.jpg) no-repeat; text-indent:-200000px;}
#header ul li.mlb a:hover{width: 84px; height: 63px; background:url(images/nav_mlb_over.jpg) no-repeat;}

#header ul li.nascar{width: 104px; height: 63px; margin-left: 0px;}
#header ul li.nascar a{width: 104px; height: 63px; display:block; background:url(images/nav_nascar.jpg) no-repeat; text-indent:-200000px;}
#header ul li.nascar a:hover{width: 104px; height: 63px; background:url(images/nav_nascar_over.jpg) no-repeat;}

#header ul li.nfl{width: 129px; height: 63px; margin-left: 0px;}
#header ul li.nfl a{width: 129px; height: 63px; display:block; background:url(images/nav_nfl.jpg) no-repeat; text-indent:-200000px;}
#header ul li.nfl a:hover{width: 129px; height: 63px; background:url(images/nav_nfl_over.jpg) no-repeat;}



/* CONTENT */

body {
   height: 100%;
   font-size:62.5%;
   font-family: Helvetica, sans-serif;
   background: url(images/noisebkg.jpg) repeat;
}

div#main-content {
   paddin-bottom: 50px;    
}

div#left-col {
   margin-left: 29px;
   padding: 9px;
   float: left;
   width: 640px;
   height: 393px;
   background: url(images/mainnewsback.jpg) no-repeat;
}

div#left-col p {
   text-indent: 9px;
   padding: 20px;
}

div#left-col p2 {
   padding: 9px;
}

div#newspic {
   margin-left: 5px;
   margin-top: 5px;
   height: 295px; width: 220px;
   float: left;
   background: url(images/mainb2bswo.jpg) no-repeat;
}

div#right-col {
   margin-right: 35px;
   float: right;
   height: 714px; width: 245px;
   background: url(images/rightsidepanel.jpg) no-repeat;
}


ul li.season6{width: 92px; height: 92px; margin-top: 80px;}
ul li.season6 a{width: 92px; height: 92px; display:block; background:url(images/season6inreview.png) no-repeat; text-indent:-200000px;}

ul li.season5{width: 92px; height: 92px; margin-top: 80px; margin-left: 25px;}
ul li.season5 a{width: 92px; height: 92px; display:block; background:url(images/season5inreview.png) no-repeat; text-indent:-200000px;}

ul li.season4{width: 92px; height: 92px; margin-top: 185px; margin-left: -210px;}
ul li.season4 a{width: 92px; height: 92px; display:block; background:url(images/season4inreview.png) no-repeat; text-indent:-200000px;}

ul li.season3{width: 92px; height: 92px; margin-top: 185px; margin-left: -90px;}
ul li.season3 a{width: 92px; height: 92px; display:block; background:url(images/season3inreview.png) no-repeat; text-indent:-200000px;}

ul li.season2{width: 92px; height: 92px; margin-top: 291px; margin-left: -210px;}
ul li.season2 a{width: 92px; height: 92px; display:block; background:url(images/season2inreview.png) no-repeat; text-indent:-200000px;}

ul li.season1{width: 92px; height: 92px; margin-top: 291px; margin-left: -91px;}
ul li.season1 a{width: 92px; height: 92px; display:block; background:url(images/seasoninreview.png) no-repeat; text-indent:-200000px;}

ul li.season7{width: 92px; height: 92px; margin-top: 397px; margin-left: -211px;}
ul li.season7 a{width: 92px; height: 92px; display:block; background:url(images/seasonsinreviewgrey.png) no-repeat; text-indent:-200000px;}

ul li.season8{width: 92px; height: 92px; margin-top: 397px; margin-left: -90px;}
ul li.season8 a{width: 92px; height: 92px; display:block; background:url(images/seasonsinreviewgrey.png) no-repeat; text-indent:-200000px;}

ul li.season9{width: 92px; height: 92px; margin-top: 503px; margin-left: -213px;}
ul li.season9 a{width: 92px; height: 92px; display:block; background:url(images/seasonsinreviewgrey.png) no-repeat; text-indent:-200000px;}

ul li.season10{width: 92px; height: 92px; margin-top: 503px; margin-left: -90px;}
ul li.season10 a{width: 92px; height: 92px; display:block; background:url(images/seasonsinreviewgrey.png) no-repeat; text-indent:-200000px;}

ul li.season11{width: 92px; height: 92px; margin-top: 609px; margin-left: -215px;}
ul li.season11 a{width: 92px; height: 92px; display:block; background:url(images/seasonsinreviewgrey.png) no-repeat; text-indent:-200000px;}

ul li.season12{width: 92px; height: 92px; margin-top: 609px; margin-left: -90px;}
ul li.season12 a{width: 92px; height: 92px; display:block; background:url(images/seasonsinreviewgrey.png) no-repeat; text-indent:-200000px;}



/* FOOTER */

div#footer {
   font-size: 110%;
   font-family: Helvetica, sans-serif;
   margin: 150px 0 0px 0;
   padding: 13px 0 57px 0;
   background: url(images/footer.jpg) repeat-x;
   text-align: center;
}

 

 

- The right column is located just above the footer by the way if you are lost in the document. Thanks!

[Wickham]

You haven't given your body markup so I'm assuming that your right column list with image links is inside #right-col:-

 

div#right-col {

margin-right: 35px;

float: right;

height: 714px; width: 245px;

background: url(images/rightsidepanel.jpg) no-repeat;

}

 

which sets it on the right with only a small right margin of 35px; so far so good.

 

Unfortunately the ul tag inside seems to be operating this style for all lists:-

 

ul#nav {

height: 28px; width: 1033px;

background: url(images/mainheader.jpg) no-repeat;

}

 

which is 1033px wide, far too wide for the right list but is intended for the header list, so edit it to:-

#header ul#nav {

height: 28px; width: 1033px;

background: url(images/mainheader.jpg) no-repeat;

}

 

which then means it only applies to the wide top menu.

 

Add a style:-

 

#right-col ul { width: 245px; }

 

to stop the right list using a width that is too wide and then make sure the list starts:-

 

 

• ..............

   

  For safety you could add #right-col in front of all the right list styles like:-

  #right-col ul li.season6{width: 92px; height: 92px; margin-top: 80px;}

  and all the others but I found it unnecessary.

   

  I tested your code with assumed body markup and your code produced the wide space on the right at first which disappeared after my edit. However, I completely guessed your markup so I may have got it wrong.

Edited December 13, 2009 by Wickham

[Bombstriker]

As soon as I added in the code...

 

#right-col ul {width: 245px;}

 

It worked right away. Thank you for that, I knew it would be something that simple. I am still fairly new to this whole thing, this is my first time making a site from my photoshop mock up. Hopefully I will be able to get it running smoothly from here on out.

 

So again, thank you very much!