Increase width of template

have the content be 500px

#main {
width:619px !important;
}

find in your theme’s default.css

#main {
	width:619px !important;
	width:618px;
}

replace it with

#main{ width: 480px /* + 20px padding */ }

next find

#sidebar {
	background:#F7F7F7;
	border-left:1px solid #DDDDDD;
}

replace it with

#sidebar{
  background-color:#f7f7f7;
  border-left:1px solid #ddd;
  float: left;
  width: 249px /* + 1px border-left */ }

lastly find

#container_body {
	background:#fff url(content_background.gif) repeat-y top right;
	border:solid 1px #B7B7B7;
}

replace it with

#container_body{
 /* the background vert line */
 background:#fff url(content_background.gif) repeat-y 500px 0px;
 border:solid 1px #B7B7B7 }

Those suggestions didnt solve the problem :S

Anyway here is what I currently have for the container body, main and sidebar.

#container_body {
margin:11px auto;
text-align:justify;
width:750px;
}

#main {
width:619px !important;
float:left;
padding:5px 10px 0;
}

#sidebar {
float:left
width:200px;
height:100%;
}

I tested it online, did u actually try?

Anyway, here some maths from your CSS ↑ and what is wrong with it.

#container_body = 750px
#main = 619px + 20px
#sidebar = 200px
#main + #sidebar = 839px

Obviously the content is larger than the wrapper (#container_body). You’ll either need too increase the wrapper width (839px) or reduce some of the content div (#main, #sidebar or both) width so it will fit inside the container.

I did try, but that was in styles.css which is different thing to the default.css which i dont know how to access. By replacing all the things you suggested it changed the front page completely.

I posted the css that i have been dealing with on my blog as a new post. I’d much appreciate it if you would have a look. Oh and i fixed up the things you mentioned in the last post.

Thanks for the help.

The default.css is inside your themes’s subfolder so it not editable/viewable on WP theme editor.

But you can used internal-embed styles to overwrite the default.css, edit your theme’s header.php. Add the below code before the closing head tag (</head>).

<style type="text/css">
/*<![CDATA[*/
  #container_body{ background-position: 500px 0px }
  #main{ width: 480px !important }
  #sidebar{ float: left; width: 249px }
/*]]>*/
</style>

Thats exactly what i wanted.

Thank You for your help. It’s very much appreciated.