Overflowing a container div horizontally but not vertically

Question

I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.

However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.

How do I fix this with as little additional elements as possible?

Answer 1

The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.

You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.