floatすると
後にあるテキストが流れ込んでしまったり
ズレてしまうことがあります。

ただclearfixを使えば簡単に解決できます。
floatしている要素を内包している親要素にclearfixと書いてあげるだけ。

これを考えた人すごいですねー。

書き方のサンプル

HTML側に

<div class="box clearfix">
<div id="float_left"><p>左コンテンツ</p></div>
<div id="float_right"><p>右コンテンツ</p></div>
</div>

そしてCSS側に

/**  clearfixここから  **/
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
* html .clearfix{height:1%;}
*:first-child+html .clearfix {display: inline-block;}
/*\*//*/
.clearfix{
	display: inline-table;
}
/**/
/**  clearfixここまで  **/

.box {width:210px;}
#float_left {
	width:200px;
	float:left;
}
#float_right {
	width:200px;
	float:right;
}

これでOKです