arranging div one below the other

Try a clear: left on #inner2. Because they are both being set to float it should cause a line return.

#inner1 {
   float:left; 
}

#inner2{
   float:left; 
   clear: left;
}

<div id="wrapper">
    <div id="inner1">This is inner div 1</div>
    <div id="inner2">This is inner div 2</div>
</div>

If you want the two divs to be displayed one above the other, the simplest answer is to remove the float: left;from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.

Alternatively, you could simply add clear:both; to the divs, which will force the floated content to clear previous floats.