Wrap text around another DIV

[sunyatasattva]

Greetings to everyone,

I'm not used to write in forums, so sorry if I appear rude or dull; I will try to get to the point as straightforward as I can.

So, I was designing a website in which the menu happens to be a bit overlapped with the main body content. I uploaded a tiny screenshot of the design (along with a rough outline of the slices I made) for your reference, so it's easier to talk about it, check it out here.
So, when I first designed that thing, since it is mostly an informative website, my idea was actually to keep everything inside the middle part, and to avoid any horizontal or vertical stretching.
Now I half made up my mind and I would like to make the design more flexible: my new idea would be to make it possible to add more text in the middle section without having that div become scrollable, but stretching the footer downwards and, eventually, having the text wrap around the menu DIV.
Hoping that's clear enough as an explaination, how could I do that?
First of all I should make the background accomodate any size: should I make a tiny, linear slice that would repeat as the background to make the middle part stretch before the footer?
Do I necessarely need to make a different DIV for the eventual text below the menu, or I can make the original middle DIV, now confined to the dimension of the slice you can see, kind of wrapping around the menu?
I'm quite confused here and not sure of the possible solutions.

I'm looking forward to any suggestion,

Thank you in advance,

M.L.

 

[PixelPusher]

Yep you can make the "middle" div text wrap around the menu using a css style called "float". You have a good idea going already... make a repeating background image for the middle div like you stated, this way no matter how long the text is, the old papyrus look will still be there.

As for the wrapping part, you will want to make the middle div as wide as slice 3 and 4. Place the menu div inside the middle div. In the css, set the menu div to "float:right;". I would add a left and bottom margin to the menu div as well, just so the text in the middle div does not but right up against it.

He is an example:

<div class="middle">
   <div class="menu">
      your menu info...</div>
</div>

div.menu {
   float:right;
   width:100px;
   height:100px;
   margin:0 0 20px 20px;
   background:url(yourMenuBgImage.png) no-repeat;
}