CSS - Class selector not working in IExplorer - css

Question

I dinamically create the following div structure:
<div id=Box>
<div id=outer>
<div id="inner1" class="split_right">
some
</div>
<div id="inner2" class="split_left">
some
</div>
.....
.....
<div id="inner(n)" class="split_right">
some
</div>
<div id="inner(n+1)" class="split_left">
some
</div>
</div>
</div>
The number of divs is dependent on the number of s passed in one array.
The problem is, that I want to give a css rule to split_right and split_left like this:
.split_left {
float: left;
margin: 0px 10px 5px 10px;
}
.split_right {
float: right;
margin: 0px 10px 5px 10px;
}
This works fine on chrome and safari but doesn't work in any IE6+
What am I doing wrong??
UPDATE
This is what I am trying to do:
http://postimage.org/image/g2t4qsq4v/
The outer div has a fixed width equal to 2*inner div width + 50pixels so that 2 s fit together in the same line.

Answer 1

Try it with this:
<div id=Box>
<div id=outer>
<div id=inner1 class="split_right">
some image
</div>
<div id=inner2 class="split_left">
some image
</div>
.....
.....
<div id=inner(n) class="split_right">
some image
</div>
<div id=inner(n+1) class="split_left">
some image
</div>
</div>
</div>
You have forgotten the quotes

Answer 2

Not sure exactly what is not working in IE and I don't know if you have a wrapper with a defined width that fits those just perfectly. But there is a famous bug in IE 6.. maybe 7 too I am not sure. If you have float left and margin in the same direction for example float left, and margin left xx number of pixels in IE 6 it will double the margin. So if you do have a define spaced that those boxes supposed to fit into, in IE it will most likely wrap to the next line making it look like it is not floating
add
display: inline;
to the css of each split class