I have a content area located below the navigation bar. I have a CSS statement for this content that says min-height: 50px; with background-color: white;
Within this content DIV area I have two Divs, one called Leftbox and one called Right box. In each of these boxes I have a bunch of <br> followed by just to give the boxes some height. These boxes have position: absolute, and are within the content area which has position: relative.
As you can see, the leftbox and rightbox have made the content area height to contain these boxes, yet the background color is only 50 pixels high.
How do I get the background color of the content area to fill the complete content area?
The reason I set it up this way is because I will have many pages like this where the amount of text and photos in each of the leftbox and rightbox will be different on each page, and I want the content area pushed down to keep the footer at the bottom, but I also want the color of the content area to fill the complete content area.
The colors I have shown are just so I can see where the different elements are located.
if you are using the float element you should use it on the element that contains it.
put float:left selector on your container and set its width to 100%
so it will cover all the middle section and the other element will get in place.
a question- why is your main element that should be contain all your side only containing the header of your site?
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.
The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.