Getting blog text to wrap around menu DIV when menu rendered last

3 comments

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

   Log in to Reply

2. You need to set float of menu to right and put it on top of the post div.

   For example, the CSS should be like this:

   #post {width: 500px;}
   #menu {
       float: right;
       width: 250px;
       height: 100px;
       color: #6666FF;
       border: solid 1px #333;
   }
   

   And HTML:

   <div id="post">
   <div id="menu">lorep ipsum</div>
   </div>
   

   Log in to Reply

3. You can wrap text around a div like you would do with an image e.g: http://jsfiddle.net/Nbpen/

   Log in to Reply