Css Help!

Hi am am new to CSS so i am just playing around with elements at the moment. What i would like you to pay close attention to is the divs called “#box” and “#paragraph”. As you can see the orange box with text is overlapping my unordered lists for grapes for red wine. Can somebody tell me how can i tell CSS to put this underneath my box and ensure that no matter how wide or long i modifie the box, the unordered lists with the div #paragraphp" always stays underneath it/ or in its correct position.

Things i have tried are adding the property clear:both and clear:left. One possible option is to have the ul to have its own div, but i would like to ecompass the paragraph within this which is why i have the div their. PLEASE HELP!!!

Note: please change the rel tag to link both files together on u’r machine.
Thanks