For this example we don’t need a whole bunch of confusing HTML markup. I’m using a containing div #clock-ticker set with a clearfix class, and inside we have 4 different floating divs. These are set to the class .block and each contains a single column of the countdown clock.

<div id="clock-ticker" class="clearfix">
	<div class="block">
		<span class="flip-top" id="numdays">8</span>
		<span class="flip-btm"></span>
		<footer class="label">Days</footer>
	</div>

	<div class="block">
		<span class="flip-top" id="numhours">14</span>
		<span class="flip-btm"></span>
		<footer class="label">Hours</footer>
	</div>

	<div class="block">
		<span class="flip-top" id="nummins">34</span>
		<span class="flip-btm"></span>
		<footer class="label">Mins</footer>
	</div>

Inside a single block area we have three core sections. The top two span elements contain the top and bottom portion of each rolodex card. By splitting up the card we could use some further jQuery UI animation effects. But this goes much further than I’d like to cover here – although it is possible to build off this preset code.

#clock-ticker { display: block; margin-bottom: 15px;}
#clock-ticker .block { position: relative; color: #fff; font-weight: bold; float: left; margin-right: 22px; }

#clock-ticker .block .flip-top { width: 88px; height: 39px; line-height: 75px; font-size: 55px; background: url('img/flip-top.png') no-repeat; text-align: center; }
#clock-ticker .block .flip-btm { width: 88px; height: 40px; background: url('img/flip-btm.png') no-repeat; text-align: center; }

#clock-ticker .block .label { color: #fbfbfb; font-weight: bold; font-size: 14px; text-transform: uppercase; width: 88px; line-height: 35px; text-align: center; font-family: "Calibri", Arial, sans-serif; text-shadow: 1px 1px 0px #333; }

Read more:http://designm.ag/tutorials/how-to-code-a-jquery-rolodex-style-countdown-ticker/