float: left

[mickey0]

Hello,
I followed this example that "should" working (not to me):
http://lau.csi.it/realizzare/accessibilita/fogli_di_stile/position/completo.htm ]float[/url]
and I wrote my css:

body { background-color: white; color: black; padding: 10px;  }
div.footer {   
    padding: 0.5em;
    color: white;
    background-color: gray;
    clear: left;
    border: Solid 2px;
 
}
 
div.footer .middle {
    margin: 0 15%;         
    border: Dashed 2px;
}
div.footer .right {
    width: 15%;
    float:left;
    margin-right: 10%; 
    border: Dashed 2px;
}
 
div.footer .left {
    float:left;
    width: 15%;
    margin-left: 0%;
    border: Dashed 2px;
}
    <div class="footer">
    <div class="left"> Hiya!!! </div>
    <div class="middle">Hello everybody</div>
    <div class="right">
       Copyright 2011 by EX
    </div>
    </div>
 

If I put the margin of the link, it doens't show the content of "left" and "right" part; if I use the margins as I wrote here above, it doens't show the content of "right".
What I want is: a footer with a sign on the left (with the text left aligned), a sign in the middle, and one on the right (with the text right aligned). I thin that the problem are not just the margins. Can anybody help, please?