I am working on a webpage here. http://webtest.iu.edu/~iutreas/fluid.html
It needs work. My current task is to try to adjust it so it has responsive design.
I am having trouble with the 3 divs contained within the div called #main_primary. The three divs are called #primary_left_column, #primary_middle_column, and #primary_right_column.
When the browser width is reduced then the primary_right_column and primary_middle_column get placed underneath the primary_left_column. This is the behavior I want to see on a smart phone but the primary_right_column and primary_middle_column divs appear on a gray background instead of a white background so it seems they are no longer contained within #main_primary once the browser width shrinks and they get placed below.
How can this be solved?
Use overflow:hidden on your parent container that has floats inside it. This will prevent margin collapse so your background extends to full height.
For more on why we use overflow:hidden, see this article.