iframe - ボックスと並べて iFrame を取得する

Question

私のジレンマは、ボックスを左側に、iframe を右側に 5 つのボックスと並べて配置したいということですが、どうすればよいかわかりません。これは私が持っているコードです。

<script>
function clock()
{
setInterval(
function(){
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");

switch(m % 10)
{
    case 0:
        box1.style.backgroundColor = "#34db00";
        box2.style.backgroundColor = "#ffc000";
        box3.style.backgroundColor = "#0093ff";
        box4.style.backgroundColor = "#0093ff";
        box5.style.backgroundColor = "#0093ff";
        break;
    case 1:
        box1.style.backgroundColor = "#0093ff";
        box2.style.backgroundColor = "#34db00";
        box3.style.backgroundColor = "#ffc000";
        box4.style.backgroundColor = "#0093ff";
        box5.style.backgroundColor = "#0093ff";
        break;
    case 2:
        box1.style.backgroundColor = "#0093ff";
        box2.style.backgroundColor = "#0093ff";
        box3.style.backgroundColor = "#34db00";
        box4.style.backgroundColor = "#ffc000";
        box5.style.backgroundColor = "#0093ff";
        break;
    case 3:
        box1.style.backgroundColor = "#0093ff";
        box2.style.backgroundColor = "#0093ff";
        box3.style.backgroundColor = "#0093ff";
        box4.style.backgroundColor = "#34db00";
        box5.style.backgroundColor = "#ffc000";
        break;
    case 4:
        box1.style.backgroundColor = "#ffc000";
        box2.style.backgroundColor = "#0093ff";
        box3.style.backgroundColor = "#0093ff";
        box4.style.backgroundColor = "#0093ff";
        box5.style.backgroundColor = "#34db00";
        break;
    case 5:
        box1.style.backgroundColor = "#34db00";
        box2.style.backgroundColor = "#ffc000";
        box3.style.backgroundColor = "#0093ff";
        box4.style.backgroundColor = "#0093ff";
        box5.style.backgroundColor = "#0093ff";
        break;
    case 6:
        box1.style.backgroundColor = "#0093ff";
        box2.style.backgroundColor = "#34db00";
        box3.style.backgroundColor = "#ffc000";
        box4.style.backgroundColor = "#0093ff";
        box5.style.backgroundColor = "#0093ff";
        break;
    case 7:
        box1.style.backgroundColor = "#0093ff";
        box2.style.backgroundColor = "#0093ff";
        box3.style.backgroundColor = "#34db00";
        box4.style.backgroundColor = "#ffc000";
        box5.style.backgroundColor = "#0093ff";
        break;
    case 8:
        box1.style.backgroundColor = "#0093ff";
        box2.style.backgroundColor = "#0093ff";
        box3.style.backgroundColor = "#0093ff";
        box4.style.backgroundColor = "#34db00";
        box5.style.backgroundColor = "#ffc000";
        break;
    case 9:
        box1.style.backgroundColor = "#ffc000";
        box2.style.backgroundColor = "#0093ff";
        box3.style.backgroundColor = "#0093ff";
        box4.style.backgroundColor = "#0093ff";
        box5.style.backgroundColor = "#34db00";
        break;            
    default:
        box1.style.backgroundColor = "#0093ff";
        box2.style.backgroundColor = "#0093ff";
        box3.style.backgroundColor = "#0093ff";
        box4.style.backgroundColor = "#0093ff";
        box5.style.backgroundColor = "#0093ff";
}
}, 1000);   
}

clock();
</script>


<style media="screen" type="text/css">

div 
{
width:30%; 
height:19.242%; 
background-color:#0093ff;  
border-radius:25px;
}
</style>






<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>



<iframe src="https://www.google.co.uk/" name="iframe1" align="right" width="69%"  height="600"></iframe>

そして、それは必要に応じて左下の 5 つのボックスとして表示されますが、iframe は右側のボックスの横ではなく、右下にあります。それらを並べて表示するにはどうすればよいですか？ありがとう。