Радикальная трансформация разметки шаблона - Joomla 2.5: Шаблоны, разметка и макеты вывода

Всем привет. очень надеюсь на помощь в следующей проблемке, заранее спасибо.

Есть сайт http://xn--h1ajbfax1d.xn--p1ai/  или  http://пупынин.рф  (на днях поменяю домен на нормальный).

В стандартной разметке очень мало позиций. Начал добавлять новую позицию (я в этом полный чайник) " Leftblok " . 
Index.php :
<div id="leftblok">
         <jdoc:include type="modules" name="leftblok" style="none"/>
         </div>
css :
/* Leftblok */
#leftblok {width:100px; min-height:100px; float:left;  margin:50px 32px 0 0; position:relative; z-index:10;}

Для тестирования разместил в новом модуле произвольный текст .

Почему-то весь остальной контент сместился вниз . никак не пойму что делать
Помогите))

Как первый вариант поместить leftblok внутрь main.

Как первый вариант поместить leftblok внутрь main.

Я это уже делал . Но тогда он появляется в main , то есть по центру между контентом и шапкой .
Мне же нужно чтобы он был слева, а после шапки сразу шел контент .

Я так понимаю где-то в стилях должно быть прописано относительно чего Main находится на странице

Css  контейнера:


/* Leftblok */
#leftblok {width:100px; min-height:100px; float:left;  margin:50px 32px 0 0; position:relative; z-index:10;}

/* Content */
#main { margin:0 auto; position: relative;background:url(../images/main.jpg) top center no-repeat}
#main-content { clear:both;margin:80px auto 0 auto; padding:0; background:url(../images/body-center.png) top center repeat-y; position:relative;}
#main-content-top {background:url(../images/body-top.png) top center no-repeat; position:absolute; top:-60px; left:0; height:577px; width:968px;}
#main-content-bottom {background:url(../images/body-bottom.png) bottom center no-repeat;position:absolute; bottom:-60px; left:0; height:300px; width:968px;}

#maincol {position: relative;}
#wrapper { margin:0 auto; width:968px; padding:0; position: relative;}
.shadow2 {background: url(../images/shadow2.png) top center no-repeat; height:8px;}
#comp_80 { width:570px; float:left; position:relative; padding:0; margin:30px 0 0 55px;  min-height:1000px; z-index:10}
#comp_100 {  width:947px; position:relative; padding:0;margin:0 auto;  min-height:300px; }
#comp-i {padding:10px}

Может это поможет... Так мой тулбар очертил относительные элементы на сайте