I have floated two divs to left and right...But the next div after those two divs does not appear correctly... My code is follows

#Div1{ position: relative; float: left; }
#Div2{ position: relative; float: right; }

And the display as follows

<div id="Div1">This is aligned to left on the same x axis</div>
<div id="Div2">This is aligned to right on the same x axis</div>
<div style="color: red;">After the alignment this div does not align</div>

The output is as follows

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

But I expect something like this

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

Anyway to accomplish this task ?? Please HELP!! Urgent help needed!!!