Widening Sidebar troubles

It would be better if you put the CSS code in here to share the issue and the link to your site if the theme is already up and tell what width you needed the sidebar to be.

Remember, if you are widening your sidebar, you will have to shorten your main content area (you would not want your site to be too wide or it will not show well in any browser.)

well I am using the slideshow widget for the NextGen Gallery and I wanted it to be 300×220 in the sidebar cause at the moment it doesn’t look all that great when I have to reduce it to 250×220. I don’t have a link to my site as I am only running it locally for the time being.

Here is the CSS of the theme.

html, body {
	font-family: arial;
	font-size: 12px;
	border: 0;
	color: #737373;
}

body, img, p, h1, h2, h3, h4, h5, ul, ol, li, form, blockquote {
	margin: 0;
	padding: 0;
}

body {
	background: url(img/bg_footer.jpg);
}

p {
	line-height: 20px;
	padding: 10px 0;
}

h1, h2, h3, h4, h5 {
	padding: 10px 0;
	color: #fff;
}

ul, ol {
	list-style: none;
	padding: 10px 0;
}

small {
	font-size: 11px;
}

code {
	background: #FFFFC1;
}

a {
	color: #DB2B2C;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a img {
	border: none;
}

blockquote {
	font-size: 12px;
	width: 80%;
	padding: 0 4%;
	margin: 10px 0 10px 4%;
	border-left: #D58B00 2px solid;
	color: #5F5F5F;
	line-height: 19px;
	font-style: italic;
}

blockquote p {
	padding: 5px 0;
}

blockquote blockquote {
	border-left: #8A111E 2px solid;
}

.aligncenter {
	margin: 10px auto 20px auto;
	display: block;
}

.alignleft {
	margin: 10px 10px 8px 0;
	float: left;
}

.alignright {
	margin: 10px 0px 8px 10px;
	float: right;
}

/* Wrap */

#wrap {
	width: 100%;
}

/* Top */

#top {
	width: 100%;
	height: 233px;
	padding-top: 5px;
	background: url(img/bg_top.jpg);
}

#top .in {
	width: 925px;
	height: 233px;
	margin: 0 auto;
	position: relative;
}

/* Top (title) */

#title {
	width: 550px;
	height: 182px;
	background: url(img/bg_title.jpg) no-repeat left top;
	overflow: hidden;
	float: left;
	position: relative;
	margin-left: -50px;
}

#title h1 {
	font-family: Tahoma;
	font-size: 40px;
	margin-left: 60px;
	padding-top: 65px;
}

#title h1 a {
	color: #fff;
	text-decoration: none;
	letter-spacing: -2px;
}

#title h1 a:hover {
	color: #00A0E6;
}

#title h3 {
	margin-left: 60px;

}
/* Top (search) */

#top #search {
	width: 197px;
	height: 42px;
	background: url(img/bg_search.jpg);
	position: relative;
	float: right;
	margin-top: 77px;
	margin-right: 43px;
	display: inline;
}

#top #search input.txt {
	color: #646464;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	position: absolute;
	left: 15px;
	top: 12px;
	border: 0;
	background: transparent;
	width: 130px;
}

#top #search input.bt {
	position: absolute;
	left: 158px;
	top: 8px;
}

/* Top (menu) */

#menu {
	width:100%;
	clear: both;
	position: absolute;
	bottom: 20px;
}

#menu ul {
	width: 920px;
	padding: 0;
}

#menu ul li {
	text-transform: uppercase;
	display: inline;
}

#menu li a {
	color: #535151;
	display: block;
	float: left;
	padding-left: 3px;
	margin-right: 7px;
}

#menu li a span {
	display: block;
	line-height: 34px;
	padding: 0 14px 0 11px;
}

#menu ul li a:hover {
	color: #fff;
	background: url(img/link_left.jpg) no-repeat left top;
}

#menu ul li a:hover span {
	background: url(img/link_right.jpg) no-repeat right top;
}

#menu ul li.current_page_item a {
	color: #fff;
	background: url(img/link_left.jpg) no-repeat left top;
}

#menu ul li.current_page_item a span {
	background: url(img/link_right.jpg) no-repeat right top;
}

/* Content Wrap */

#content_wrap {
	width: 100%;
	background: url(img/bg_content.jpg);
}

#content_wrap .in {
	width: 925px;
	margin: 0 auto;
	padding-bottom: 30px;
}

/* Content */

#content {
	width: 549px;
	float: left;
	padding-top: 30px;
}

#content h2 {
	font-size: 21px;
	font-family: Georgia;
	font-weight: normal;
}

#content h1, #content h2, #content h3 {
	color: #fff; /* #9F9F9F */
}

#content h2 a {
	color: #00A0E6;
	text-decoration: none;
}

#content h2 span a {
	color: #fff;
}

#content h2 a:hover {
	text-decoration: underline;
}

#content ul {
	padding-left: 50px;
	color: #737373;
}

#content ol {
	padding-left: 70px;
	color: #737373;
}

#content ol li {
	padding-left: 70px;
	line-height: 19px;
	padding: 2px 0 2px 0px;
}

#content ul li {
	line-height: 19px;
	padding: 2px 0 2px 20px;
	background: url(img/square.gif) no-repeat 0 10px;
}

#content ol li {
	list-style: decimal;
}

/* Content (post) */

.post {
	padding: 15px 0 10px 0;
	clear: both;
}

.post a {
	text-decoration: underline;
}

.post a:hover {
	color: #fff !important;
}

.post .title {
	background: url(img/line.gif) no-repeat left bottom;
	position: relative;
	margin-bottom: 5px;
}

.post .date {
	margin-top: -20px;
	font-size: 11px;
	position: relative;
	padding-bottom: 8px;
}

.post .date a, .post .post_details a {
	color: #9D9D9D;
	text-decoration: none;
	border-bottom: #494949 1px solid;
}

.post .date a:hover, .post .post_details a:hover {
	text-decoration: none;
	border-color: #5A5A5A;
}

.post .post_details {
	font-size: 11px;
	clear: both;
}

/* More Posts */

.more_posts {
	padding: 15px 0 10px 0;
	font-family: Georgia;
}

.more_posts h2 {
	font-size: 19px !important;
}

.more_posts a {
	color: #9F9F9F !important;
}

.more_posts h2 a:hover {
	color: #fff !important;
	text-decoration: none !important;
}

/* Comments (single.php and comments.php) */

h2.lc {
	padding-top: 20px;
}

.comments_wrap {
	width: 500px;
	margin: 20px 0 0px 10px;
	clear: both;
	padding-bottom: 5px;
}

.comments_wrap a {
	text-decoration: underline !important;
}

.comments_wrap a:hover {
	text-decoration: none;
	color: #fff;
}

.comments_wrap .left {
	width: 46px;
	padding-top: 2px;
	float: left;
}

.comments_wrap .left img {
	border: #4A4A4A 3px solid;
	padding: 1px;
}

.comments_wrap .right {
	width: 410px;
	float: left;
	padding-left: 20px;
}

.comments_wrap .right h4 {
	font-size: 11px !important;
	text-transform: none;
	padding: 0;
	font-weight: normal;
	color: #707070;
}

.comments_wrap .right h4 b {
	font-size: 12px !important;
	color: #8C8C8C;
}

.comments_wrap .right h4 a {
	text-decoration: none;
}

.comments_wrap .right h4 a:hover {
	text-decoration: underline;
}

/* Comments (form) */

#content form {
	margin: 20px 0 30px 10px;
}

#content form label {
	display: block;
	margin: 10px 0;
	font-size: 12px;
}

#content form label input {
	padding: 6px 4px;
	width: 220px;
	font-size: 12px;
	background: #2F2F2F;
	border: #3F3F3F 1px solid;
	color: #fff;
}

#content textarea {
	margin-bottom: 10px;
	display: block;
	padding: 3px;
	font-size: 12px;
	background: #2F2F2F;
	border: #3F3F3F 1px solid;
	color: #fff;
}

#content form input {
	margin-top: 5px;
}

#content form input.sb {
	background: #2F2F2F;
	border: #3F3F3F 1px solid;
	color: #8B8B8B;
	padding: 5px 0;
	width: 80px;
}

.lc_logged {
	padding: 0;
	margin-top: -10px;
}

/* Widget (calendar) */

#wp-calendar {
	width: 95%;
	padding: 0 0 0px 0;
	margin-bottom: 15px;
}

#wp-calendar caption {
	padding: 10px;
}

#wp-calendar th {
	color: #fff;
}

#wp-calendar th, #wp-calendar td {
	padding: 5px;
	text-align: center;
	background: #383838;
	color: #9E9E9E;
}

#wp-calendar td {
	background: transparent;
}

#wp-calendar td, table#wp-calendar th {
	padding: 3px 0;
}

#wp-calendar a {
	text-decoration: underline;
}

#wp-calendar a:hover {
	text-decoration: none;
}

/* Sidebar */

#sidebar {
	width: 284px;
	float: right;
	background: url(img/bg_sidebar.jpg);
}

#sidebar_in {
	width: 284px;
	padding-bottom: 120px;
	background: url(img/sidebar_bottom.jpg) no-repeat left bottom;
}

#sidein {
	padding-left: 20px;
	margin-top: -10px;
	width: 241px;
	overflow: hidden;
	padding-right: 23px;
}

#sidebar h2 {
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
	background: url(img/sidebar_h2.jpg) no-repeat;
	padding: 0 0 0 20px;
	margin-top: 10px;
	margin-bottom: 5px;
	line-height: 35px;
	width: 262px;
	margin-left: -19px;
}

#tag_cloud h2 {
	margin-bottom: 15px;
}

.widget_tag_cloud {
	padding-bottom: 20px !important;
}

.widget_text {
	padding-bottom: 20px !important;
}

.widget_text h2 {
	margin-bottom: 15px !important;
}

.block {
	padding-bottom: 10px;
}

#sidebar a {
	text-decoration: underline;
}

#sidebar a:hover {
	color: #fff;
}

a.rss {
	display: block;
	width: 284px;
	height: 58px;
	background: url(img/sidebar_rss.jpg);
	margin-top: -21px;
	position: relative;
}

a.rss:hover {
	background: url(img/sidebar_rss_hover.jpg);
}

a.rss span {
	display: none;
}

#sidebar ul {
	padding: 10px 0;
}

#sidebar ul ul {
	padding: 0;
}

#sidebar li {
	line-height: 18px;
	padding: 2px 0 2px 20px;
	background: url(img/li.gif) no-repeat 0 8px;
}

#sidebar li a {
	color: #FA884A;
	text-decoration: none;
}

#sidebar li a:hover {
	text-decoration: underline;
	color: #fff;
}

/* Footer */

#footer {
	width: 100%;
	background: url(img/footer_top.jpg) repeat-x top;
}

#footer .in {
	width: 925px;
	margin: 0 auto;
	padding-top: 45px;
	padding-bottom: 40px;
}

/* Footer (copyright) */

#copyright {
	font-size: 11px;
	width: 400px;
	float: left;
}

#copyright a {
	color: #CDCDCD;
	border-bottom: #494949 1px solid;
	text-decoration: none;
}

#copyright a:hover {
	border-color: #5A5A5A;
	color: #fff;
}

#copyright p {
	padding: 0;
}

/* Footer (menu) */

#fmenu {
	width: 500px;
	float: right;
	height:27px;
	overflow:hidden;
}

#fmenu ul {
	float: right;
}

#fmenu li {
	display: inline;
	padding:0px 0px 10px 0px;
	line-height:16px;
}

#fmenu li a {
	color: #6E6E6E;
	padding: 6px;
	margin-right: 8px;
}

#fmenu li a:hover, #fmenu li.current_page_item a {
	color: #fff;
	background: url(img/footer_menu_bg.jpg);
}

/* Fix */

#content_wrap:after,
.comments_wrap:after,
.in:after {
    content: ".";
    display: block;
	 height: 0;
    clear: both;
    visibility: hidden;
}

I have changed:

#sidebar {
	width: 284px;
	float: right;
	background: url(img/bg_sidebar.jpg);
}

#sidebar_in {
	width: 284px;
	padding-bottom: 120px;
	background: url(img/sidebar_bottom.jpg) no-repeat left bottom;
}

to

#sidebar {
	width: 400px;
	float: right;
	background: url(img/bg_sidebar.jpg);
}

#sidebar_in {
	width: 400px;
	padding-bottom: 120px;
	background: url(img/sidebar_bottom.jpg) no-repeat left bottom;
}

When I do that it makes the sidebar go near the bottom of the page but doesn’t widen the sidebar.

Try to reduce the #content width to less than 500 #sidebar and
#content together should be less than or equal to #content_wrap (925) width.As there are paddings u should count them also.And also reduce the #comment width.

thanks!