How to make div height increase to include floated image

While @cletus's solution is technically correct, setting overflow to any value other than overflow: visible (the default), initial (explicitly use default), or inherit with a visible parent will result in the element creating a new block formatting context. A block formatting context is a region in which floating elements can interact with blocks. This situation (floated element inside of a non overflow:visible element) is explicitly listed as the reason for the creation of a new context being a necessity:

"if a float intersected with the scrolling element it would forcibly rewrap the content. The rewrap would happen after each scroll step, leading to a slow scrolling experience." - mdn

As a result, the height will be be recalculated for any immediate children within this new context, and their heights will be included.

I prefer to use overflow: auto to accomplish this when I can, but scroll, overlay, or hidden will all produce the desired result of including the float in the calculation of the height of the parent element.

You can change the behaviour of how parent blocks deal with floated content by changing the overflow property. This should do it:

#main_contentbox { overflow: hidden; }