CSS after code doesnt seem to work on page

hi ..

i am creating a page in which i wanted to use an orderlist with a special bullet and spaced equally.

i created the following code

css as below

/* -------- 3 Column Order List -------- */

div.tick3col ol
{
  width: 100%;  /* room for 3 columns */

}
div.tick3col ol  li
{
  float: left;
  width: 20em;  /* accommodate the widest item */
  list-style-type: none;
  background-image: url('../images/bluetick.png');
  background-position: 0px 50%; /* X-pos Y-pos (from top-left) */
  background-repeat: no-repeat;
  padding-left: 54px;
  line-height: 38px;

}
/* stop the floating after the list */
div.tick3col:after
{
  clear: left;
}

/* separate the list from what follows it */
div.tick3col
{
    margin-bottom: 1em;

}

then inside the page added the following

<div class="tick3col">
<ol>
	<li><a title="Vertical Blinds" href="/blinds/vertical-blinds/">vertical blinds</a></li>
	<li><a title="Roller Blinds" href="/blinds/roller-blinds/">roller blinds</a> (including motorised)</li>
	<li><a title="Venetian Blinds" href="/blinds/venetian-blinds/">venetian blinds</a></li>
	<li><a title="Wood Venetian Blinds" href="/blinds/wood-venetian-blinds/">wood venetian blinds</a></li>
	<li><a title="pleated blinds" href="/blinds/pleated-blinds/">pleated blinds</a></li>
	<li><a title="wood weave blinds" href="/blinds/woodweave-blinds/">wood weave blinds</a></li>
</ol>
</div>

this is the first time i try using the pseduo class :after, it took me a while to get the css working until i used div.tickcol3 refrence prefixes so either the reset css or other template/theme css didnt interfear

so why cant i get the div.tickcol3:after css to clear the float for the spacing

i am doing something wrong ??

thanks