Is the CSS right?

Question

Below is my CSS file and an image of what I'm referencing. In the picture, it's the 1st, but if it was the 10th, or any other 2-digit-day, would the 2013 or no? It's a dumb question, and I know, but I'm not sure about the whole margin, padding, position, and float factors.

REPHRASED QUESTION: I'm not too good with padding and margins so maybe I'm asking the wrong question. The picture shows April 1 2013, great. But I'm wondering if April 10 (a 2nd-digit day) will make the 2013 shift RIGHT (what I want), overlap the 2013, or go somewhere else not on that line? Reason I'm asking is because of my margins, paddings, floats, and positions, I'm not sure if it's going to affect it..

@font-face {

    font-family: Walkway Bold;

    src: url('Fonts/WalkwayBold.ttf');
}


@font-face {

    font-family: Roboto;

    src: url('Fonts/Roboto.ttf');
}

@font-face {

    font-family: CaviarDreams;

    src: url('Fonts/CaviarDreams.ttf');
}

body {

    font-family: Roboto;
    margin: 0;
    padding:0;
    background: #000;
    background-size: 61%;
    color:#FFF;
    text-shadow:3px 3px 7px #000000;

}

div#content {
    position:absolute;
    -webkit-transform: rotate(0deg);
    left:75px;
    top:0px;
}

div#timecluster {
    font-family: Roboto;
    position:absolute;
    text-align:center;
    top:30px;
    left:-95px;
    color:#fff;
    clear:left;
    width:345px;
    opacity:.8;
}

div#hourbox {
    font-family: Roboto;
    text-align:right;
    color:#ffffff;
    position:relative;
    font-size:75px;
    letter-spacing:-5px;
    margin-right:3px;
    font-weight:bold;
}

div#minutebox {
    font-family: Roboto;
    position:relative;
    opacity: 0.2;
    font-size:75px;
    letter-spacing:-5px;
    margin-left:10px;
    font-weight:bold;
}

div#ampmbox {
    text-align:right;
    position:relative;
    font-size:75px;
    letter-spacing:-5px;
    font-weight:bold;
    margin-top:-5px;
    right: -5;
}

div#datecluster {
    position:absolute;
    top:90px;
    left:-130px;
    width:380px;
    height:180px;
}

div#dateinner {
    position:absolute;
    top:40px;
    left:40px;
    width:300px;
    height:90px;
}



div#monthbox {
    font-family: CaviarDreams;
    position:absolute;
    float:left;
    padding:0;
    font-size:20px;
    opacity:0.2;
    width:135px;
    text-align:right;
    top: -19px;
}

div#daybox {
    font-family: CaviarDreams;
    position:relative;
    float:left;
    padding:0;
    font-size:20px;
    opacity:0.2;
    width:135px;
    text-align:right;
    top: 1;
}

div#datebox {
    font-family: Roboto;
    position:relative;
    float:left;
    margin:-20px 4 0 10;
    font-size:40px;
    opacity:.8;
    text-align:center;
}

div#yearbox {
    font-family: Roboto;
    position:relative;
    float:none;
    margin:-20 0 0 0px;
    font-size:40px;
    opacity:.1;
top:0;
right: 0;
}

Answer 1

Yes, but in context your question is, some browser do not support the ttf fronts by default, so you may convert them to "woff" supports better,

use google fonts the are freely available, if that suits your requirements then :)

or convert your ttf fonts in woff, many free online converters are available,

then code will be like this.. for 'Droid Serif'

@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}

I hope this will help you :)

With Updated Question

Add some margin to the year left,

Updated Answer..

div#yearbox {
font-family: Roboto;
position:relative;
float:left;
margin:-20 0px 0px 10px; 'this last element will represent margin left i.e. 10px
font-size:40px;
opacity:.1;
top:0;
}