Positioning elements with margins where content is of variable height is not a sound approach.
Technobear is right that clear:both; is appropriate but this alone will not allow you to add a top margin to #bottom.
bottom is, in effect, a footer and unrelated to the main content of the page. Wrap everything inside #main, from the h2 down to but not including #bottom, in a new div, perhaps with the id #content.
Then give #content overflow:hidden, to that it wraps around the floated elements it contains.
Then give #bottom clear:both and whatever top margin you wish.
margin-top: 30px; /* or whatever you like */