Randy:
Your question (and problem) is a common one when trying to create multiple
CSS columns.
There are two things you can do to make your life simpler:
1. Understand how to clear floats - when an item is floated within a
container, the container no longer needs to wrap the item, and so it will
collapse to the height of its smalllest non-floated content. This means
that the floated item *can* poke through the bottom of the container. If
your background color is in the container, then you will not see that
background color extend the full height of the floated element, as a result.
You can solve this by clearing the float before closing the container. In
other words, in this arrangement -
<div id="container" style="background-color:red;"><div id="content"
style="float left;">whatever</div></div>
as you add more content to the content div, you will not see the red
background expand to wrap it. However, consider this -
<div id="container" style="background-color:red;"><div id="content"
style="float left;">whatever</div>
<br style="clear:left;">
</div>
The float is cleared before the container is closed. Now it must catch up
to its content. That can solve many problems such as you mention. This
method is useful when the container backgrounds need to stretch.
2. The other useful technique is one I will call a 'faux column" - a
colored background image that looks like it is a column filling space
vertically, and over which your content container is showing, but now you
have no need to try to stretch the content container vertically to fill its
wrapper. This is useful when the content containers do not stretch.
Get what I am saying?
