Question

I am working with WordPress and I am trying to modify my template so that on my blog pages. I have a menu on the right hand side of the page while the blog content is on the left. The problem I am having is that all the space under the menu <div> is wasted and I would like to have the blog content wrap/flow around the menu <div>. Normally I would float the menu <div> to the right, however the WordPress engine outputs this <div> after the blog content so I am not sure how to float it to the upper right corner of the page.

I have created a JSFiddle example to illustrate.

Answer 1

You can use a short bit of JavaScript to move the menu as necessary. See the JSFiddle I forked from yours.

Essentially I modified the HTML to add ids to the menu and the blog content, something like this:

<div id="blog">
    <p>...</p>
</div>
<div id="menu">
    ...
</div>

Then I styled them like so in CSS. Note that the menu has an explicit width but the blog content itself does not.

#blog { }
#menu {
    float: right;
    width: 400px;
}

Then I used a quick bit of JQuery to move the menu into the blog so that it can float right and the text will wrap around it:

$('#blog').prepend($('#menu').remove());​

Essentially what the JavaScript does is it removes the menu from the dom and then inserts it as the first child in #blog.
​