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

Tags: css,wordpress,html,css-float

Problem :

I am struggling to figure out how to align widgets to the right of the main column on this page:

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.


Solution :

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:

    CSS Howto..

    How to remove pipe separator of the first list item on the line?

    how to add css for div tag

    Greasemonkey how to apply a CSS rule only for @media print?

    how to save style-css values for Later use then Reload those values back

    How can I center a figure with caption?

    How to enforce a min-width for a page (css)

    How to get Style From jQuery in angular2

    How to reverse this CSS spin animation

    CSS HTML how to remove whole cell links in tables?

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How to have two background-images with CSS? [duplicate]

    How to execute jquery when a variable with a CSS property changes

    In jQuery how do I make multiple changes to css in a function?

    How to style the entire first row of a table in css

    How to load Different css everytime onload

    How to change the position of image in search box in css?

    How do I get a jquery function to only affect the child element of 'this'

    How to implement image sticker (ribbon) with css3

    how to give dynamic height in css

    How to make list inside div expand after content in list

    How do you add PHP to CSS?

    How to fade in and fade out text on a timer using css animations

    How to select child element inside first, second or third html element with CSS classes?

    How does calc() CSS property degrade in older browser

    How to overlap a div to an another div without changing their positions - Css

    How to match an element's background colour with 2 semi-transparent element background colours

    How to make div block fixed as window size changes?

    how to rotate text with css? transform is not supported by current schema?

    How to use CSS' “rotateX()” with jQuery's animate() on multiple elements with delay

    How to do page load in jQuery?