Floating a div

Question

Floating a <div>
I have two content areas below my logo and navigation bar, I entered this HTML,
<div id=”bodyArea”>
<div id=”left”></div>
<div id=”right”></div>
</div>
I then floated the left div to the left and the right div to the right, I never specified a height for the left div as I wanted it to auto expand with the content as it dose, the right div I did specify a height of 300 pixels, now I thought once the left div came down by the 300 pixles mark and cleared the right div I thought it would then take up the space on the  below the right div.
I thought of another idea but don't know if it's possible, to make only one area bellow my navigation bar that auto expands with the content, and place a box (div) on top is this possible, (like floating a div on top of another) I just want an area of 200x300 like a notice area to sit on top of the main content area, any help or suggestions would be greatly appreciated.

Answer 1

Goodness.  This is a very strange reply.
A floated <div> will never surround (or go under in the way you're saying) a non-floated <div>    
This is correct.
floated divs basically seem to have less priority than those that are not.
This is fantasy.
In that case you would want the right <div> to have the rule {float: right;} so the content in the left one would essentially surround it.
That's incorrect.  If you have this -
<div id="left"></div>
<div id="right" style="float:right;"></div>
then the right div will be BELOW the left div, not to its right.  To make it appear to the right, you would have to float the left div to the left, and the right div to the left as well.
If you decide you still want the left one floated, what you can do to make that floated <div> extend beyond the content <div> is add the rule {overflow: auto;} to it and that may work, or you may have to have to set that on the #bodyArea div if that doesn't work.
Sorry, this makes no sense at all.