div appearing before | element - css

Question

In this fiddle : http://jsfiddle.net/thbuf/110/
The div "test" is appearing before the | element. This is occurring despite that the "test" is added after | . Is there an issue with css ?
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='container'>
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right;">|</div>
<div style="display: inline; float:right">test</div>
</div>
</div>

Answer 1

That is because of the float: right on both the elements. This makes them act as though they are stacked from the right side of the screen and so the first element in the document order becomes the first from the right followed by the second element.
To reverse them, you just need to reverse the order.
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right">test</div>
<div style="display: inline; float:right">test</div>
</div>

Answer 2

Just add new div to contain the sub divs like so:
<div style="float:right">
Hind the working fiddle: here