Добавление кнопки-ссылки в хедер сайта.

Добрый день!
Пытаюсь создать свой первый сайт на CMS Joomla и возникла следующая проблема. Не получается правильно вставить кнопку-ссылку в хедер сайта.
Пробую два варианта:
1) В свойствах кнопки-ссылки задаю относительное позиционирование. Результат - кнопка устанавливается, но при этом высота хедера увеличивается на высоту кнопки. то есть хедер становится больше по высоте и вверху хедера появляется дополнительный ненужный белый фон. То есть, получается не красиво.
2) В свойствах кнопки-ссылки задаю абсолютное позиционирование. Результат - кнопка устанавливается и на этот раз высота хедера не увеличивается и это хорошо. Только, возникает другая проблема - при сокращении окна браузера кнопка-ссылка начинает "плавать" по сайту.
Цель - сделать так, чтобы при вставке кнопки-ссылки в хедер, хедер не становится больше по высоте и при этом не начинал "плавать" по сайту! Что конкретно нужно для этого сделать?
Привожу часть кода index.php и template.css:

index.php

PHP:

<!-- Header -->
       
            <header class="header" role="banner" >
                <a href="index.php/svyazatsya" id="blok2"><img src="images/headers/vopros.png" ></a>
            <div class="header-inner clearfix">
           
                    <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                        <?php echo $logo; ?>
                        <?php if ($this->params->get('sitedescription')) : ?>
                            <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')). '</div>'; ?>
                        <?php endif; ?>
                    </a>
                    <div class="header-search pull-right">
             </div>
               
                </div>
              </header>

template.css

PHP:

#blok2{ position: relative; left:855px; top:130px; }

Если нужно показать больше кода, то я добавлю.

 

Доброго, используй position: absolute; для кнопки. А position: relative; для родителя относительно которого он будет позиционироватся. Заменить left:855px; на right (в px или %) предпологаю б что этого будет достаточно.

 

1) у .header добавь position:relative; а у кнопки absolute, при этом поиграйся с позиционированием относительно header (неплохо бы его стиль выложить сюда)
2) в класс блока добавить margin-bottom: -130px; и посмотреть результат

 

Мной были внесены коррективы в файл index.php и template.css:
index.php

PHP:

<!-- Header -->
         
            <header class="header" role="banner" >
              <a href="index.php/svyazatsya" id="blok2"><img src="images/headers/vopros.png"></a>
             
             
            <div class="header-inner clearfix">
             
                    <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                        <?php echo $logo; ?>
                        <?php if ($this->params->get('sitedescription')) : ?>
                            <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
                        <?php endif; ?>
                    </a>
                    <div class="header-search pull-right">
             </div>
                 
                </div>
              </header>
          

template.css

PHP:

#blok2{ position: absolute; right:10px; top:55px; margin-bottom: -130px;}

PHP:

.header {
    margin-bottom: 10px;
    position:relative;

На данный момент суть вопроса в том, что при уменьшении окна браузера, происходит уменьшение хедера с изображением. А размер кнопки при этом остаётся неизменным. То есть на экране происходит диспропорция самого хедера и кнопки-ссылки в хедере. Как сделать, чтобы при уменьшении (или увеличении) окна браузера пропорционально изменялся размер хедера и кнопки-ссылки в хедере?
Спасибо!