CODEWITHSUNDEEP
javascriptjquerycsshtml
user3238555
user3238555

Reputation: 21

Place div in new line

I programmed this javascript countdown but there is a problem with div. How can I make my div to go in new line. When I say new line I think now my left time is formated like this:

5h:21min:3sec0h:56min:4sec

But how can I format it like this? That every time is in new line.

5h:21min:3sec

0h:56min:4sec

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<script>
var d = new Date();
var n = d.getDay();
if(n == 1 || 2 || 3 || 4 || 5){
var timer1;
function cdtd1() {
    var sad1 = new Date();
    var dolazak1 = new Date(sad1.getFullYear(),sad1.getMonth(),sad1.getDate(),23,30,00);
    var timeDiff1 = dolazak1.getTime() - sad1.getTime();
    if (timeDiff1 <= 0) {
        clearInterval(timer1);
                document.getElementById(id).innerHTML = '';
    }
    var sekunde1 = Math.floor(timeDiff1 / 1000);
    var minute1 = Math.floor(sekunde1 / 60);
    var sati1 = Math.floor(minute1 / 60);
    var dani1 = Math.floor(sati1 / 24);
    sati1 %= 24;
    minute1 %= 60;
    sekunde1 %= 60;
    
    $("#dani1Box").html(dani1);
    $("#sati1Box").html(sati1 + ':');
    $("#minute1Box").html(minute1 + ':');
    $("#sekunde1Box").html(sekunde1);
    
    timer1 = setTimeout(cdtd1, 1000);
}

$(document).ready(function() {
     cdtd1();
});

var timer2;
function cdtd2() {
    var sad2 = new Date();
    var dolazak2 = new Date(sad2.getFullYear(),sad2.getMonth(),sad2.getDate(),24,00,00);
    var timeDiff2 = dolazak2.getTime() - sad2.getTime();
    if (timeDiff2 <= 0) {
        clearInterval(timer2);
                document.getElementById(id).innerHTML = '';
    }
    var sekunde2 = Math.floor(timeDiff2 / 1000);
    var minute2 = Math.floor(sekunde2 / 60);
    var sati2 = Math.floor(minute2 / 60);
    var dani2 = Math.floor(sati2 / 24);
    sati2 %= 24;
    minute2 %= 60;
    sekunde2 %= 60;
    $("#dani2Box").html(dani2);
    $("#sati2Box").html(sati2 + ':');
    $("#minute2Box").html(minute2 + ':');
    $("#sekunde2Box").html(sekunde2);
    
    timer2 = setTimeout(cdtd2, 1000);
}

$(document).ready(function() {
     cdtd2();
});
}
</script>





<style type="text/css">
#dani1Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}

#sati1Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}


#minute1Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}



#sekunde1Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}

#dani2Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}

#sati2Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}


#minute2Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}



#sekunde2Box{font-size:70px;
         color:#1f62a7;
         font-family:Sans-serif;
         display: inline-block;
}

h1{font-size:70px;
    color:#1f62a7;
    font-family:Sans-serif;
    display: inline-block;
}

</style>
  <center>
    <div id="sati1Box">></div>
   
    <div id="minute1Box"></div>
    
    <div id="sekunde1Box"></div>
    </div>
    
    
    <h1> </h1>

    <div id="sati2Box"></div>
    
    <div id="minute2Box"></div>
    
    <div id="sekunde2Box"></div>
    </div>
    
   </center> 
</body>

Upvotes: 1

Views: 96

Answers (1)

James Montagne
James Montagne

Reputation: 78660

Divs go to a new line by default. You have forced them not to do this by adding display: inline-block;.

You probably want to wrap your elements in a div which will default to display: block and then keep your individual divs as inline-block. Something like this:

<div>
    <div id="sati1Box"></div>
    <div id="minute1Box"></div>
    <div id="sekunde1Box"></div>
</div>
<div>
    <div id="sati2Box"></div>
    <div id="minute2Box"></div>
    <div id="sekunde2Box"></div>
</div>

Upvotes: 2

Related Questions