Float breaks page

[SamohtVII]

I have a content area that has 'stuff' in it and a footer below that and it all aligns nicely. I want to add a second content bit next to an existing one so there are side by side columns in the content area. I can do this with float and they align next to each other but it brings the footer all the way up and overlays the two. Is there a way to keep the footer to appear after all the content. Thanks

<div id="content">		 <div id="news">			 <p1>Latest Headlines</p1><br />			    <h1>HON TOUR CYCLE 8 DIAMOND LBR3 - SG VS LION GAME 1</h1>			   		    </div>		    <div id="sidebar">			 <p1>Latest Headlines</p1><br />		    </div>	    </div>   

Thanks

[dsonesuk]

#content {overflow:hidden;} The outer container cannot detect the area of floated elements within it, so it becomes zero height, if the footer is non-floated, it will attempt to merge with floated elements, by given the outer container overflow: hidden; the floated child elements area is detectable, and footer should be below its content.

[SamohtVII]

Perfect thank you