div появляется перед | элемент

Question

В этой скрипке: http://jsfiddle.net/thbuf/110/

Разница «тест» появляется перед | элемент. Это происходит, несмотря на то, что «тест» добавляется после | , Есть ли проблема с 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

Это происходит из-за float: right на обоих элементы. Это заставляет их действовать так, как будто они сложены с правой стороны экрана, поэтому первый элемент в заказе документа становится первым справа, а затем вторым элементом.

Чтобы отменить их, вам просто нужно изменить порядок.

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

Просто добавьте новый DIV, чтобы содержать вложенные дивы так:

<div style="float:right"> 

Hind рабочий скрипку: here