Order Matters with Floats

by fezec

HTML

<h1>order matters with floats</h1>
<div class="wrapper">
    <img src="http://weightshift.com/_gfx/work-rdio-tn.jpg">   
    <div id="bar">order matters</div>    
</div>


<div class="wrapper">
    <div id="bar">order matters</div>    
    <img src="http://weightshift.com/_gfx/work-rdio-tn.jpg">   
      
</div>

CSS

img{
    float:right;
    width:100px;
   
    border:1px solid green;
}

*{
    border:1px solid red;
}
#bar{
    display:block;
    background-color:black;

    width:inherit;
    height:25px;
    color:white;
    text-align:right;
}

div{
    position:relative;
    overflow:hidden;
}