Question

I’m trying to create a two columns layout where there is one column floated left, and there are two DIVs floated right. The sum of the two right DIVs is a height that is less than the height of the left DIV. I think I’m missing some CSS that allows this to happen. As of right now the second right DIV is appearing below the end of the left DIVs because of the height difference.

It’s probably easier to view the page itself to see the issue. I need to have the DIV close the end of the right content so that it appears that all of the text is within a box.

http://brimbar.com/no_crawl/RiverHollow/history.html

I can add a negative margin to accomplish this, but I’m assuming I’m going about this all wrong.

Answer 1

Un-float both (or all, if you plan to add more) of your righthand divs, put them inside a wrapper, and then give that wrapper a margin-left value equivalent to the width of your left div.

screenshot: http://easycaptures.com/fs/uploaded/677/0314515048.png

demo: http://jsbin.com/aviyok/1/edit

You should also remove the huge negative margin on your right content div; that breaks very easily.