Etiqueta div que solo se alinea a izquierda y centro
He realizado el siguiente contador cogiendo parte de codigo de un reloj animado, el problema que tengo es que la etiqueta div que pinta los digitos del contador solamente se me alinean a la izquierda y al centro, con el consiguiente problema que tengo al incluir el codigo como giny dentro de una pagina web, ya que la barra de los ginys esta a la derecha de la pantalla y esto de lo mueve todo el sitio web, espero haberme explicado, el codigo es el siguiente:
(Pongo todo el codigo para que veáis mejor a que refiero).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script>
var animspeed = 440;
var clocktick = 15755;
function counterElement (id,lim,v) {
this.domObj = id;
this.offset = 0;
this.nextElem = null;
this.offsetIncrement = 57.5;
this.limit = lim;
this.speed = this.domObj.substring(2,3)*animspeed;
$(this.domObj).css('background-image', 'url(numbers'+this.limit+'.jpg)');
if (v==null) {
this.val = 0;
}else{
this.val = v;
this.offset = this.val*this.offsetIncrement;
$(this.domObj).animate( {backgroundPosition:"(0 -"+this.offset+"px)"}, this.speed, 'swing');
}
this.inc = function() {
if (this.val == 0) {
$(this.domObj).css('backgroundPosition', '0px 0px');
}
this.val += 1;
this.offset = this.val * this.offsetIncrement;
if (this.val > this.limit) {
if (this.nextElem != null) {
this.nextElem.inc();
}
$(this.domObj).animate( {backgroundPosition:"(0 -"+this.offset+"px)"}, this.speed, 'swing');
this.offset = 0;
this.val = 0;
}else if (this.domObj == '#c5' && this.val > 3 && c6.val==2) {
if (this.nextElem != null) {
this.nextElem.inc();
}
$(this.domObj).css('backgroundPosition', '0px 0px');
this.offset = 0;
this.val = 0;
}else{
$(this.domObj).animate( {backgroundPosition:"(0 -"+this.offset+"px)"}, this.speed, 'swing');
}
};
}
function restart() {
this.style.backgroundPosition='0px 0px';
}
</script>
<style>
div#clock {
width:282px;margin-top:43px; /* doy amplitud y altura del reloj */
}
div>div {
width:32px; /*Ancho de cada dígito */
height:57px;/*Altura de cada dígito */
repeat: repeat;
/*background-image:url(numbers.jpg);*/
background-position: 0px 0px;
float:left;
}
div#colon {
width:20px; /*Ancho de los dos puntos */
height:58px;/*Altura de los dos puntos */
background-image:url(colon.jpg);
}
div#euro {
width:32px; /*Ancho de los dos puntos */
height:57px;/*Altura de los dos puntos */
background-image:url(euro.jpg);
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<!-- por que esta etiqueta div solo se me alinea a la izquierda y al centro y no a la derecha ??? -->
<right>
<div id="clock">
<div id="c7"></div>
<div id="c6"></div>
<div id="c5"></div>
<div id="c4"></div>
<div id="colon"></div>
<div id="c3"></div>
<div id="c2"></div>
<div id="c1"></div>
<div id="euro"></div>
</div>
</right>
<br>
<div id="debug">
</div>
<script>
var output;
function odometerInc() {
setTimeout("odometerInc()",clocktick);
c1.inc();
//output = output+c1.val+"<br>";
//document.getElementById('debug').innerHTML = output;
}
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var transc1= Date.UTC(2013,0,1);
var ahora = new Date();
var total= ahora - transc1;
var segundos= Math.floor(total / 1000);
var minutos= segundos / 60;
var horas= minutos / 60;
var días= horas / 24;
var centims= minutos * 0.3805;
var euros= centims / 100;
euros=euros.toFixed(3);
var e4 = Math.floor(euros / 1000);
euros = euros - (e4 * 1000);
var e3 = Math.floor(euros / 100);
euros = euros - (e3 * 100);
var e2 = Math.floor(euros / 10);
euros = euros - (e2 * 10);
var e1 = Math.floor(euros / 1);
euros = euros - e1;
euros=euros.toFixed(3);
/* centims */
euros = parseInt(euros * 1000);
var cent3 = Math.floor(euros / 100);
euros = euros - (cent3*100);
var cent2 = Math.floor(euros / 10);
euros = euros - (cent2*10);
var cent1 = euros;
var c7 = new counterElement('#c7', 9, e4);
c7.nextElem = null;
var c6 = new counterElement('#c6', 9, e3);
c6.nextElem = c7;
var c5 = new counterElement('#c5',9, e2);
c5.nextElem = c6;
var c4 = new counterElement('#c4', 9, e1);
c4.nextElem = c5;
var c3 = new counterElement('#c3',9, cent3);
c3.nextElem = c4;
var c2 = new counterElement('#c2',9, cent2);
c2.nextElem = c3;
var c1 = new counterElement('#c1',9, cent1);
c1.nextElem = c2;
setTimeout("odometerInc()",15755);
</script>
</body>
</html>