How to change the length of the blocks in the left column?

[vivifromage]

Hello!

 

A friend of mine created my website 2 years ago, including a left column with 2 blocks ("categories" and "information") : http://vivifromage.com/shop.php

 

I'd like to add another block between these ones (using the module "2nd block categories"), but when I'm trying, it is very long:

 

 

And of course I'd like the 3 blocks to be as long as the center part:

 

 

I could edit the global.css to change the length of the 1st block "categories", but I don't know how to change the length of a new block.

Here's a copy of the code about blocks:

 

/* Default block style */
div.block {
margin-bottom: 9px;
width: 191px
}
div.block2 {
margin-bottom: 9px;
width: 191px
}
#left_column div.block,
#right_column div.block {
padding-bottom: 5px;
background-color: #5d5d5d;
}
#left_column div.block2,
#right_column div.block2 {
padding-bottom: 5px;
background-color: #5d5d5d;
}
div.block h4 {
text-transform: uppercase;
font-style: italic;
font-size: 1.1em;
padding-left: 2.7em;
padding-top: 12px;
line-height: 1.3em;
color: white;
height: 29px;
width: 180px;
background: transparent url('../img/block_header.png') no-repeat top left
}
div.block2 h4 {
text-transform: uppercase;
font-style: italic;
font-size: 1.1em;
padding-left: 2.7em;
padding-top: 12px;
line-height: 1.3em;
color: white;
height: 29px;
width: 180px;
background: transparent url('../img/block_header.png') no-repeat top left
}
div.block h4 a { color: #374853 }
div.block2 h4 a { color: #374853 }
div.block ul { list-style: none }
div.block2 ul { list-style: none }
div.block ul.tree li { padding-left: 1.2em }
div.block2 ul.tree li { padding-left: 1.2em }
div.block a:hover { text-decoration: underline }
#left_column div.block .block_content a.button_large,
#right_column div.block .block_content a.button_large { margin: 0 0 0 -3px }
div.block .block_content {
padding: 0 0.7em;
width: 163px;
height: 375px;
background-color: #5d5d5d;
}
div.block2 .block_content {
padding: 0 0.7em;
width: 163px;
height: 220px;
background-color: #5d5d5d;
}
div.block li {
padding: 0.2em 0 0.2em 0em;
list-style-position: outside
}
div.block2 li {
padding: 0.2em 0 0.2em 0em;
list-style-position: outside
}
div.block a {
color: white;
text-decoration: none
}
div.block2 a {
color: white;
text-decoration: none
}

 

I hope that someone can help me

Thank you!

Edited September 30, 2012 by vivifromage (see edit history)

[math_php]

Hi,

 

In fact in your css you have height defined like this

div.block .block_content {
   background-color: #5D5D5D;
   height: 375px;
   padding: 0 0.7em;
   width: 163px;
}

Then try to deal with fixed height (increase or decrease 375px).

It really deals with css at wich I am bad

 

Good luck

[vivifromage]

Thanks for your answer.

I did try to change this part, but it only changed the height of the first block ("categories")

[math_php]

Yes second block height has to be changed with this css rule

div.block2 .block_content {
   background-color: #5D5D5D;
   height: 220px;
   padding: 0 0.7em;
   width: 163px;
}