Align clocks horizontally on a webpage

Question

I want clocks displaying different time zones on a webpage that i am designing.For this,i have embedded the javascript files from a webiste called qlock.The HTML code is as follows:

<script type="text/javascript">
qlock_city_name="Adelaide";
qlock_gmt_offset=9.5;
qlock_bg_color="#000000";
qlock_text_color="#ffffff";
qlock_dst_week1=1;
qlock_dst_dow1=7;
qlock_dst_month1=10;
qlock_dst_week2=1;
qlock_dst_dow2=7;
qlock_dst_month2=4;
</script>
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script>

<script type="text/javascript"><!--
qlock_city_name="Melbourne";
qlock_gmt_offset=10;
qlock_bg_color="#000000";
qlock_text_color="#ffffff";
qlock_dst_week1=1;
qlock_dst_dow1=7;
qlock_dst_month1=10;
qlock_dst_week2=1;
qlock_dst_dow2=7;
qlock_dst_month2=4;
//--></script>
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script>

What this does is display the clocks of Adelaide and Melbourne one below the other. Is there any way to display them horizontally right next to each other?

Answer 1

Check this Fiddle

Wrap the clock with div and give the float to it

<div class="left"><script type="text/javascript">
qlock_city_name="Adelaide";
qlock_gmt_offset=9.5;
qlock_bg_color="#000000";
qlock_text_color="#ffffff";
qlock_dst_week1=1;
qlock_dst_dow1=7;
qlock_dst_month1=10;
qlock_dst_week2=1;
qlock_dst_dow2=7;
qlock_dst_month2=4;
</script>
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script>
    </div>
<div class="left">
<script type="text/javascript"><!--
qlock_city_name="Melbourne";
qlock_gmt_offset=10;
qlock_bg_color="#000000";
qlock_text_color="#ffffff";
qlock_dst_week1=1;
qlock_dst_dow1=7;
qlock_dst_month1=10;
qlock_dst_week2=1;
qlock_dst_dow2=7;
qlock_dst_month2=4;
//--></script>
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script>
    </div>

CSS

.left {
    float:left;
}

Answer 2

you could set a css property on your clocks to float left

#qlock1, #qlock2{
    float: left;
}

demo here

PS you could set a common class for all clocks and not worry about every id in your css

Answer 3

My way would be to place the scripts inside a simple table;

<table style="table-layout:fixed;width:600px;">
  <tr height="30">
    <td width="150"><script type="text/javascript"><!--
qlock_city_name="Melbourne";
qlock_gmt_offset=10;
qlock_bg_color="#000000";
qlock_text_color="#ffffff";
qlock_dst_week1=1;
qlock_dst_dow1=7;
qlock_dst_month1=10;
qlock_dst_week2=1;
qlock_dst_dow2=7;
qlock_dst_month2=4;
//--></script>
<script type="text/javascript" src="qlock.js"></script>
</td>
    <td width="200"><script type="text/javascript">
qlock_city_name="Adelaide";
qlock_gmt_offset=9.5;
qlock_bg_color="#000000";
qlock_text_color="#ffffff";
qlock_dst_week1=1;
qlock_dst_dow1=7;
qlock_dst_month1=10;
qlock_dst_week2=1;
qlock_dst_dow2=7;
qlock_dst_month2=4;
</script>
<script type="text/javascript" src="qlock.js"></script>
</td>
    <td width="250">CSS table layout cell 3</td>
  </tr>
</table>