Как исправить эти адаптивные колонки?

Question

[Алексей]

Поставил на сайте два адаптивных блока, в одном из которых разместил блок вк, в другом сторонний модуль. По какой-то причине, вк отказывается адаптироваться под блок, как это исправить?

<div id="columns">
		
		<div><script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script>
		<!-- VK Widget -->
	<div id="vk_groups"></div>
	<script type="text/javascript">
		VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "auto", height: "400"}, 65273602);
	</script></div>
	
	<div>
		{include file="/engine/modules/moonserials_block.php"}
	</div>
</div>

#vk_groups,
#vk_groups iframe {
     width: 100% !important;
}

#columns {
    display: table;
    width: 100%;
    box-sizing: border-box; 
    margin-left: 0;
    margin-right: 0;
}

#columns > div {
    display: table-cell;
    vertical-align: top;
    width: auto;
    box-sizing: border-box;  /* не поддерживается в CSS2 */
}

Comments

[Hyubert]

display: table; display: table-cell; ??????????????? Вы с какого года? забудьте о таблицах , сейчас так не верстают

[Алексей]

Hyubert: вы раскрыли меня. Я из прошлого. А как сейчас верстают?

[Hyubert]

Алексей: блоками с использованием flexbox или с помощу современых фреймворков , например Twitter Bootstrap

Answer 1

[Максим Тимофеев]

Виджет вк - это головная боль. Проще всего написать js, брать размер родительского дива и прописывать явно виджету. потом грузить виджет

еще я подозреваю, что Ваш #columns > div не растягивается.

Comments

[Алексей]

Ух, звучит совсем не просто

[Максим Тимофеев]

Сделайте две колонки по 50%, а не auto и в них положите виджеты. Все будет ок

[Максим Тимофеев]

auto - Устанавливает ширину исходя из типа и содержимого элемента. А не растягивает по родителю

[Максим Тимофеев]

Задайте контейнеру для виджета вменяемый размер и он растянется.

[Максим Тимофеев]

Алексей: Совсем просто http://jquery.page2page.ru/index.php5/Работа_с_шир...

[Алексей]

Максим Тимофеев: пробовал прописывать, как в div в коде width="50%, так и в css. Но ничего не изменяется.

Answer 2

[Дмитрий]

<div>
    
    <div><script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script>
    <!-- VK Widget -->
  <div id="vk_groups"></div>
  <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "auto", height: "400"}, 65273602);
  </script></div>
  
  <div id="columns">
    {include file="/engine/modules/moonserials_block.php"}
  </div>
</div>

а размеры укажите для ВК укажите в {mode: 2, wide: 1, width: "auto", height: "400"}

Comments

[Алексей]

Сделал, но теперь оба блока просто выходят за границу основного блока, в подвал. Почему?