Вопрос по расположению виджета - Joomla 3.x: Шаблоны, разметка и макеты вывода

всем привет, подскажите пожалуйста как мне разместить виджеты рядом друг с другом или выше друг друга. а  то они у меня все в кучу
вот скрин ru.files.fm/u/mztj7ubj .незнаю как картинку сюда добавить
вот код на два виджета и они легли друг на друга
<div class="mango-callback" data-settings='{ "type":"", "id": "MTAwMDgzMjk=","autoDial" : "0", "lang" : "ru-ru", "host":"widgets.mango-office.ru/", "errorMessage": "В данный момент наблюдаются технические проблемы и совершение звонка невозможно"}'>
</div>
<script>!function(t){function e(){i=document.querySelectorAll(".button-widget-open");for(var e=0;e<i.length;e++)"true"!=i[e].getAttribute("init")&&(options=JSON.parse(i[e].closest('.'+t).getAttribute("data-settings")),i[e].setAttribute("onclick","alert('"+options.errorMessage+"(0000)'); return false;"))}function o(t,e,o,n,i,r){var s=document.createElement(t);for(var a in e)s.setAttribute(a,e[a]);s.readyState?s.onreadystatechange=o:(s.onload=n,s.onerror=i),r(s)}function n(){for(var t=0;t<i.length;t++){var e=i[t];if("true"!=e.getAttribute("init")){options=JSON.parse(e.getAttribute("data-settings"));var o=new MangoWidget({host:window.location.protocol+'//'+options.host,id:options.id,elem:e,message:options.errorMessage});o.initWidget(),e.setAttribute("init","true"),i[t].setAttribute("onclick","")}}}host=window.location.protocol+"//widgets.mango-office.ru/";var i=document.getElementsByClassName(t);o("link",{rel:"stylesheet",type:"text/css",href:host+"css/widget-button.css"},function(){},function(){},e,function(t){document.documentElement.insertBefore(t,document.documentElement.firstChild)}),o("script",{type:"text/javascript",src:host+"widgets/mango-callback.js"},function(){("complete"==this.readyState||"loaded"==this.readyState)&&n()},n,e,function(t){document.documentElement.appendChild(t)})}("mango-callback");</script>
  <script> (function(w, d, u, i, o, s, p) { if (d.getElementById(i)) { return; } w['MangoObject'] = o; w

• = w
• || function() { (w
• .q = w
• .q || []).push(arguments) }; w
• .u = u; w
• .t = 1 * new Date(); s = d.createElement('script'); s.async = 1; s.id = i; s.src = u; s.charset = 'utf-8'; p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p); }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo')); mgo({multichannel: {id: 1267}}); </script>

У вас и вопрос весь "в кучу", вряд ли кто-то разберёт. 

В общем я вставил код обратного звонка в редакторе шаблона главной странице перед закрывающем тегом </body>
Плюс добавил код кнопочки чата в этом же редакторе главной страницы.
И получилось что кнопка часа поверх кнопки обратного звонка отображается!  Как сделать чтоб эти две кнопки не мешали друг другу(небыли наложены друг на друга)

Как сделать чтоб эти две кнопки не мешали друг другу(небыли наложены друг на друга)

Учить CSS или привести ссылку на сайт и ждать, чтобы кто-то дал ответ. По картинкам не лечат, вопросы тоже надо уметь задавать (вам за это уже поставили минус).

Вот сайт,  Okna-nova.com
Вправо нижнем углу эти кнопочки

С помощью CSS ваши кнопки можно поправить. Как Вы хотите их видеть?

С помощью CSS ваши кнопки можно поправить. Как Вы хотите их видеть?

Привет,  хотелось бы чтоб кнопка чата была над кнопкой звонка

так и неразобрался!((
подскажите где в ксс что подправить нужно?

подскажите где в ксс что подправить нужно?

В стилях где-нибудь

В стилях где-нибудь

Код

#mgo-mcw-widget.mgo-mcw-widget{bottom:100px}

Спасибо попробуем