I need helpw ith my website + Css Expanding Please

[planesrock]

runenation.com

I want that skin to expand the whole page.


The skin is only random, I will edit the pictures and stuff later.

body {
	background-color: #B0B0B0;
	text-align: center;
	margin-top: 50px;
}
#topline {
	background-color: #29363E;
	height: 9px;
}
#logocell {
	background-color: #FFFFFF;
	width: 174px;
	height: 134px;
}
#maintable {
	width: 770px;
	text-align: left;
}
#menu {
	background-color: #29363E;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	vertical-align: top;
	text-align: left;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
}
#menu a {
	font-family: Arial, Helvetica, sans-serif;
	color: #AEB6BB;
	font-size: 10pt;
	text-decoration: none;
	line-height: 1.4em;
}
#menu a:hover {

	font-family: Arial, Helvetica, sans-serif;
	color: #797B00;
	font-size: 10pt;
	text-decoration: none;
	line-height: 1.4em;
}
/*================================================================================
>> Main Menu Links
================================================================================*/

td.vmenu_main_off {
   width: 100%;
   border: 0px;
   padding: 0px 0px 0px 0px;
}

td.vmenu_main_on {
   width: 100%;
   border: 0px;
   padding: 0px 0px 0px 0px;
}

div.vmenu_main_off {
   width: 100%;
   font-size: 13px;
   font-weight: normal;
}

div.vmenu_main_on {
   width: 100%;
   font-size: 13px;
   font-weight: bold;
}
/*================================================================================
>> Main Menu Links END
================================================================================*/
/*================================================================================
/* Sub Menu Links
================================================================================*/
td.vmenu_sub_off {
   width: 100%;
   border: 0px;
   padding: 0px 0px 0px 15px;
}

td.vmenu_sub_on {
   width: 100%;
   border: 0px;
   padding: 0px 0px 0px 15px;
}

div.vmenu_sub_off {
   width: 100%;
   border: 0px;
   padding: 0px 0px 0px 15px;
   font-size: 9pt;
   font-weight: normal;
}

div.vmenu_sub_on {
   width: 100%;
   border: 0px;
   padding: 0px 0px 0px 15px;
   font-size: 9pt;
   font-weight: bold;
}
/*================================================================================
/* Sub Menu Links END
================================================================================*/
#maincontent-index {
	background-color: #FFFFFF;
	width: 365px;
	text-align: left;
	vertical-align: top;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 15px;
	padding-bottom: 20px;
}
#maincontent-index h1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #797B00;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
#maincontent-index p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: normal;
	text-decoration: none;
	color: #000000;
}
#maincontent-index2 {
	background-color: #FFFFFF;
	width: 560px;
	text-align: left;
	vertical-align: top;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 15px;
	padding-bottom: 20px;
}
#maincontent-index2 h1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #797B00;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
#maincontent-index2 p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: normal;
	text-decoration: none;
	color: #000000;
}
#footer {
	background-color: #29363E;
	height: 20px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	color: #AEB6BB;
	text-decoration: none;
	font-size: 8pt;
	text-align: right;
	padding-right: 10px;
	padding-top: 4px;
}
#rightcontent {
	background-color: #FFFFFF;
	width: 196px;
	vertical-align: top;
	padding-top: 20px;
	padding-bottom: 10px;
}
#promo {
	width: 188px;
	border: 1px solid #9A9B9D;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#promo2 {
	width: 188px;
	border: 1px solid #9A9B9D;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#promo h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #D0440F;
	text-decoration: none;
	margin-bottom: 2px;
}
#promo p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #000000;
	text-decoration: none;
	font-weight: normal;
	margin-top: 0px;
}

 

[theone_trent]

First off, to get it to the top left corner of the screen you would need to remove "text-align: center;" and "margin-top: 50px;" from the #body.

As far as the rest, you would pretty much have to change the widths from a certain px to 100%. That is a very nice and clean layout. The index page seems a little small for my taste. I assume that is why are asking to how to change it to be full screen.

 

[Yek]

How is it going , i see if you set the atribs of the top image to 100% it will strech it , or are you replacing this with a custom logo ?