Columns overlapping in blogger

I have used the dots template from this site: http://hackosphere.blogspot.com/3006/09/3-column-templates-for-blogger-beta_01.html

to add 3 columns to my blog: http://celebritat.blogspot.com/

and I tried to customize it because at start, the columns were too narrow. When I changed the main wrapper to:

PHP:

#main-wrapper {
  width:660px;

from 380px

the columns started overlapping each other and is in the current state (first column is at the bottom).

Now my CSS code is the following for the Page Structure:

PHP:

#outer-wrapper {
  background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
  width:750px;
  margin:0 auto;
  text-align:left;
  font:$bodyfont;
  }

#header-wrapper { 
  display: none;
 }

#main-wrapper {
  width:660px;
  margin-right: 20px;
  float:center;
  padding:20px 0 20px;
  font-size:85%;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }
#main {
  background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
  padding:20px 10px 15px;
  }
#sidebar-wrapper {
  width:150px;
  float:left;
  font-size:85%;
  padding-bottom:20px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }
#newsidebar-wrapper {
  width:150px;
  float:right;
margin-left: 20px;
  font-size:85%;
  padding-bottom:20px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }
#sidebar {
  background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
  padding:40px 10px 15px;
  width:200px;
  width/* */:/**/180px;
  width: /**/180px;
  }

It all worked before I made the changes but the main column was too narrow and I can't have it like that.

How could I change it so the columns are all where they should be?

Thanks in advance,
Nick

 

Come on, someone must know something about CSS. It's all over the place at the moment