Floating and clearing five section tags

I have five section tags that I would like to float so that they are inline with each other. I have used the float / clearfix technique in the past and it has worked. I cannot figure out what i am doing wrong.

CSS:

[code]
#content{ padding:30px 0 0 15px; width: 959px; }

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

*html .clearfix {
height: 1%;
}

#1, #2, #3, #4, #5 {padding-right:15px; float: left;}
[/code]

HTML:

[code] <div id=”content”>
<section id=”1″>
<img src=”1.png” />
</section>

<section id=”2″>
<img src=”2.png” />
</section>

<section id=”3″>
<img src=”3.png” />
</section>

<section id=”4″>
<img src=”4.png” />
</section>

<section id=”5″>
<img src=”5.png” />
</section>

</div><!– end content–>

<div class=”clearfix”></div>[/code]

Also in #CSS _↴