Проблема с плавающими div - как я могу иметь виджеты рядом с постами, а не ниже?

Question

Я изо всех сил пытаюсь выяснить, как выровнять виджеты справа от основного столбца на этой странице: http://carolineelisa.com/wordpress/

Похоже, что верхние 3 виджета принудительно увеличивают область содержимого до полной ширины, поэтому правые виджеты опускаются ниже левого столбца.

Какие-нибудь советы для достижения этого с помощью CSS? Я бы предпочел не связываться с шаблонами файла functions.php, чтобы переместить верхние виджеты в их собственный div.

Спасибо!

Answer 1

Вы должны поместить два правых элемента div перед столбами div.

<div id="content" class="hfeed content">
<div id="primary" class="sidebar aside">

Это вместо

<div id="primary" class="sidebar aside">
<div id="content" class="hfeed content">

Answer 2

Кажется, что CSS не будет достаточно в этом случае ...

Спасибо @Frost и @Justin Lucas за ваши предложения. Для моих точных потребностей, кажется, мне нужно переместить 3 верхних виджета из #content div и разместить их выше.

Так что теперь HTML выглядит так:

<div id="feature" class="widget widget_text widget-widget_text">
<div id="feature" class="widget widget_text widget-widget_text">
<div id="feature" class="widget widget_text widget-widget_text">
<div id="content" class="hfeed content">
<div id="primary" class="sidebar aside">

Для всех, кому это может быть интересно, я сделал это, создав новый элемент боковой панели в своей дочерней теме (Hybrid), добавив в файл functions.php следующее:

register_sidebar( array(
    'name' => 'Features',
    'id' => 'id-of-widget-area',
    'before_widget' => '<div id="feature" class="widget %2$s widget-%2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
) );
add_action( 'hybrid_before_container', 'my_widget_area', 20 ); 

function my_widget_area() {
    dynamic_sidebar( 'id-of-widget-area' );
}

Я получил это от: http://themehybrid.com/support/topic/new-widget-area#post-17991

Answer 3

Попробуйте разместить внутри

<div id="content" class="hfeed content">    
<div id="utility-before-content" class="sidebar utility">
<div id="primary"></div>
<div id="post-49" class="hentry post publish post-1 odd author-admin sticky category-news">
...