A common problem I experience in making two column designs is that because I also utilize a header/footer approach one of the columns always ends up bleeding through and under the footer.
<div style='position: absolute; '>
Left Column
</div>
<div style='position: relative; left: 50%; width: 50%'>
Right Column
</div>
If Left Column is now greater in content than Right Column because of the absolute identifer the content doesn't "push" the DIV down to reflect it's content. However Right Column because it's relative does adjust as expected. I have tried wrapping the two DIV's inside a container DIV but that doesn't work. I was sure I seen a CSS property which "cleared" some attribute and forced the DIV to adjust.
I'm not sure if the right DIV can be a child of the other or visa-versa as one of the columns is being added programatically...if that makes anysense...so ideally I need a layout which is dual sibling DIV's which render nicely as expected...
Gente's solution works fine. Watch out with the percentages though. Sometimes 50% + 50% is > 100% due to rounding errors. And in that case IE drops one of the floats below the other. I usually set the percentages a fraction lower, to keep a bit of "margin"
matthijs wrote:Gente's solution works fine. Watch out with the percentages though. Sometimes 50% + 50% is > 100% due to rounding errors. And in that case IE drops one of the floats below the other. I usually set the percentages a fraction lower, to keep a bit of "margin"
That will make sure any currently floating elements don't float over that div and below. I add the (code for a single space character) because IE6 needs data in the div for it to render properly (surprising, isn't it).
That will make sure any currently floating elements don't float over that div and below. I add the (code for a single space character) because IE6 needs data in the div for it to render properly (surprising, isn't it).
I apologize for the confusion but yes, there was a footer. Moose's suggesiton worked but I had to place that DIV immediately after the two columns to clear their float-ness and to push the footer down instead of under-lapping them.