Сразу скажу, я пробовал ставить проценты и убирать position:absolute, но не получилось... Код
$(document).ready(function() {
$("#timer").countdown({
since: new Date(2015, 8, 6, 00, 00, 00),
http: //ru.stackoverflow.com/editing-help
format: "YODHMS",
layout: '<dl><dt id="years_lbl">YEARS</dt><dd id="years">{ynn}</dd><dt id="months_lbl">MONTHS</dt><dd id="months">{onn}</dd><dt id="days_lbl">DAYS</dt><dd id="days">{dnn}</dd><dt id="hrs_lbl">HOURS</dt><dd id="hours">{hnn}</dd><dt id="mins_lbl">MINUTES</dt><dd id="minutes">{mnn}</dd><dt id="secs_lbl">SECONDS</dt><dd id="seconds">{snn}</dd></dl>'
});
});
dl {
position: relative;
height: 80px;
margin: 20px auto 50px;
width: 810px;
height: 150px;
background: green;
font-size: 1.5em;
color: #000;
}
dt {
position: absolute;
top: 10px;
left: 0;
width: 135px;
text-align: center;
padding-top: 15px;
}
dd {
position: absolute;
top: 50px;
left: 0;
font-size: 2.2em;
text-align: center;
width: 135px;
}
dt#years_lbl,
dd#years {
left: 0;
}
dt#months_lbl,
dd#months {
left: 135px;
}
dd#days {
left: 270px;
}
dd#hours {
left: 405px;
}
dt#mins_lbl,
dd#minutes {
left: 540px;
}
dt#secs_lbl,
dd#seconds {
left: 675px;
}
#dl * {
text-outline: 1px 1px #000;
}
dt#days_lbl {
left: 290px;
}
dt#hrs_lbl {
left: 415px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<article class="article-timer">
<center>
<div style="font-family:verdana; " id="timer"></div>
</center>
</article>
<article class="article-timer">
<center>
<div style="font-family:verdana; " id="timer"></div>
</center>
</article>