开发者

Issue with floating divs - how can I have the widgets alongside the posts, not below?

I am struggling to figure out how to align widgets to the right of the main column on this page: http://carolineelisa.com/wordpress/

It seems that the top 3 widgets are forcing the content area to the full width, so that the right hand side widgets drop below the left column.

Any tips for achieving this with CSS? I'd rather not have to mess with the templates of functions.php file to move the top widgets into their own div.

Thanks!开发者_开发百科


You have to place the two right side divs before the post divs.

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

This instead

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


Try placing your inside

<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">
...


It seems CSS will not suffice in this case...

Thanks @Frost and @Justin Lucas for your suggestions. For my exact needs it seems that I need to move the top 3 widgets out of the #content div and place them above.

So now the HTML looks like this:

<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">

For anyone who may be interested, I did this by creating a new sidebar element in my child theme (of Hybrid) by adding the following to the functions.php file:

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' );
}

I got this from: http://themehybrid.com/support/topic/new-widget-area#post-17991

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜