javascript - Next Div Does not appear correctly after floating two divs to right and left -

i have floated 2 divs left , right...but next div after 2 divs not appear correctly... code follows

#div1{ position: relative; float: left; } #div2{ position: relative; float: right; } 

and display follows

<div id="div1">this aligned left on same x axis</div> <div id="div2">this aligned right on same x axis</div> <div style="color: red;">after alignment div not align</div> 

the output follows

http://i.stack.imgur.com/8a6hz.png

but expect this

http://i.stack.imgur.com/wvgn6.png

try code. insert clear both in style.

 #div1{ position: relative; float: left; }  #div2{ position: relative; float: right; }  <div id="div1">this aligned left on same x axis</div> <div id="div2">this aligned right on same x axis</div> <div style="color: red;clear:both;">after alignment div not align</div>