distance between elements in columns

I want to increase the distance between elements in left column. (Information box and Categories box)

How to do that?

Do you mean between the boxes - i.e. information, and categories - or you mean between the links in each box?

In first case add this to your stylesheet.css

#information {
margin-bottom: 30px;
} /* use the value you like */

In the second case see my last post here
http://www.zen-cart.com/forum/showthread.php?t=175560&page=2

#informationContent ul li a {
display: block;
color: #FFFFFF;
background: none repeat scroll 0 0 #FFFF00;
border-bottom: 1px dotted #FFFFFF;
padding: 3px;
}

You can change the padding like this
padding: 2px 0 2px 0;

I'm interested about first case but the problem is if :

In categories box I add some categories the information box go to bottom.

As I add even more categories in categories box the information box goes below.

How to repair that?

Why do you keep uninstalling Zen Cart?
If you want to change the template all you need to do is either create a new template, or delete the one you want.

The suggestion in my previous post should work, have you set the order of the boxes in
admin > tools > layout boxes controller?
The lowel value the higher the box.

Post back when you have Zen Cart online again, and add a couple categories to see exactly what you mean.

i solved the problem.

how to do that information box stay fix. when I change screen resolution the information box goes below/above . And I want to be same height as the logo.

I tried different resolutions, and it stays where it should.

You should/could control the width of your columns (L+R) in admin > configuration > layout settings

You should remove the left padding value (now is 100) from your #logo, I don0t see why you need it.
You could add a
padding-bottom: 33px
to your #information
to line it up better with your logo at the bottom.

I posted print screens of different resolution of the screen so you can see the difference.

I see try the following

line 780 locate #information, and add the padding-bottom

#information {
margin-bottom: 70px;
padding-bottom: 44px;
}

line 594 locate .sideBoxContent and change the padding values

.sideBoxContent {
background-color: black;
padding: 0 0.5em;
}

the problem persist :(

Try trimming 2px off the logo image height, it should work with the other settings.

Please let me advise you to first set the width of your mainwrapper, then in admin>configuration>layout settings set the width of your left and right columns, after that go on, and tweak the boxes properties.

I suggest you firefox and the "web developer" and/or "firebug" add-ons for it to find out each elements setting, and test them live on the site.
Google chrome too thru its options has tools for the developer, and I understand ie8 too, though I never use this last one.

problem solved...

I just set the padding of the information:

padding: 0px 200px 40px 400px;

and means that the information box background will be back off the logo.