Easy points - Positioning elements with <DIV> and <SPAN>

I got a simple and fast question. I would like to know how to position empty elements for <SPAN> with this class:

.square
            {
                  width:10px;
                  height:10px;
                  background-color:red;
            }

.line
            {
                  width:300px;
                  height:10px;
            }
The <SPAN> (with class .square) would be positioned one near another, and <DIV> (with class .line) would contain all of them (in a line). At the end I would like to have something like that:

<div> <span></span><span></span>..... </div>
<div> <span></span><span></span>..... </div>
....
<div> <span></span><span></span>..... </div>


I asking for a solution that will work on IE 6.0, 7.0, FF, opera and Safari. I get my own solution but I got problems with showing in IE - it just uses "float:left" in class that i provided.Start Free Trial