What code separates floated columns from elements below

[MacLustre]

HelloI am floating DIVs side-by-side.(They are not the same length.)The next element on the page appears behind the columns instead of beneath them.I can't remember what I read about that, I've not been able to remember keywords that would lead me to a Fix.I need a method to separate the next element from the bottom of these columns.The css code is very plain for the columns: width, padding, float-left or float-right.(I don't want to fix the position of the columns.)I'm hoping to learn an elegant way of forcing elements to sit below these columns in a way that allows top padding or top margin settings to work.Thanks for any help.

[dsonesuk]

try just adding clear:both to the bottom element

[dsonesuk]

Or add containing div around the two columns and give it with:100%; overflow: hidden;<div style="width:960px;margin:0 auto;overflow:hidden;"><div style="width:100%;overflow:hidden;"><div style="float:left; width:50%; height: 300px; background-color:#00CCCC"></div><div style="float:right; width:50%; height: 300px; background-color:#CC6699;"></div></div><div style="width:100%; background-color:#FFCC66; height:100px;">bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom </div></div>

[MacLustre]

try just adding clear:both to the bottom element

That has helped. Thanks.That's put the element at the bottom of the 'floaters', and I can make a space between them with padding.Thanks again.