[Solved] HTML aligning ’s correctly

by


You will need parent for both percent text.. Something like this.

<div class="percent-container">
    <p id="currentlbl" class="percent">00:00:00</p>
    <p id="durationlbl" color="“white”" class="percentt">00:00:00</p>
</div>

And the CSS for new percent-container class should be like this..

.percent-container {
    position: relative;
    height: 30px;
}

Also changed the CSS of the percent and percentt class.
I have made the position:absolute and display:inline-block for above both classes.

For percent class you will need left: 20px; and for percentt class you will need right: 20px;

.percent {
    position: absolute;
    top: 2%;
    color: white;
    display: inline-block;
    left: 20px;
}

.percentt {
    position: absolute;
    color: white;
    display: inline-block;
    right: 20px;
}

And done.! Happy coding 🙂

Update 1:

Here is your working snippet

var btnv = 0;

function Dropdown() {
  var i = 0;
  if (i == 0) {
    i++;
    document.getElementById("Dropbutton").classList.toggle("dropbtnclick");
    document.getElementById("Dropbutton").classList.toggle("dropbtnpos");
    document.getElementById("myDropdown").classList.toggle("show");
  } else {
    i--;
    document.getElementById("Dropbutton").classList.remove("dropbtnclick");
  }
}

function drop() {}

window.onclick = function(event, clicked_id) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        //openDropdown.classList.remove('show');
      }
    }
  }
}

//labels

//buttons
var input = document.getElementById("button");
var input2 = document.getElementById("button2");
//text/labels/numbers
//number vals
var num = 1;
var a = new Date();
var mt = a.getMonth() + 1;
var dy = a.getDate();
var yr = a.getFullYear();
var tm = a.getHours() + ":" + a.getMinutes();
var dateFormat = mt + "https://stackoverflow.com/" + dy + "https://stackoverflow.com/" + yr + "_" + tm;
//labels
var audiotitle = document.getElementById("audiotitle");
var audioartist = document.getElementById("artist");
var image = document.getElementById("AlbumArt");
var x = document.getElementById("myAudio");
var percent = document.getElementById("currentlbl");
audiotitle.innerHTML = x.title;
//inputslider
var slider = document.getElementById("myRange");

slider.oninput = function() {
  percent.innerHTML = this.value + "%";
  x.currentTime = slider.value;
}

function Shuffle() {
  var s = Math.floor(Math.random() * 14) + 1;

  x.title = titles[s];
  audiotitle.innerHTML = x.title;
  audioartist.innerHTML = artists[s];
  image.src = albumart[s];
  x.src = songs[s];
  x.play();
  num = 1;
  playAudio();
}

var i = 1;

function keys() {

  if (x.currentTime == x.duration) {
    //x.src = sources.two;
    i++;
    x.title = titles[i];
    audiotitle.innerHTML = x.title;
    audioartist.innerHTML = artists[i];
    image.src = albumart[i];
    x.src = songs[i];
    x.play();
    num = 1;
    playAudio();
  }
}

function next() {
  i++;
  x.title = titles[i];
  audiotitle.innerHTML = x.title;
  audioartist.innerHTML = artists[i];
  image.src = albumart[i];
  x.src = songs[i];
  x.play();
  num = 1;
  playAudio();
}

function rewind() {
  i--;
  x.title = titles[i];
  audiotitle.innerHTML = x.title;
  audioartist.innerHTML = artists[i];
  image.src = albumart[i];
  x.src = songs[i];
  x.play();
  num = 1;
  playAudio();
}

function Playbutton(clicked_id) {
  i = clicked_id;
  x.title = titles[i];
  audiotitle.innerHTML = x.title;
  audioartist.innerHTML = artists[i];
  image.src = albumart[i];
  x.src = songs[i];
  x.play();
  num = 1;
  playAudio();
}


function startup() {
  input2.style.display = "none";
}
startup()

function playAudio() {
  x.play();
  if (num == 1) {
    x.play();
    //text.innerHTML = "pause";
    input.style.display = "none";
    input2.style = "visibility:visible;";
    input2.style.display = "block";
    num = 0;
    d = dateFormat + "playing";

  } else {
    x.pause();
    //text.innerHTML = "play";
    input2.style = "visibility:hidden;";
    input2.style.display = "none";
    input.style = "visibility:visable;";
    num = 1;
    d = dateFormat + "paused";

  }
}



window.addEventListener('load', function() {
  var cur = document.querySelector('#perc'),
    vid = document.querySelector('#myAudio')
  dur = document.getElementById("durationlbl");
  per = document.getElementById("currentlbl");
})

myAudio.addEventListener('timeupdate', function(e) {
  //current time
  per.textContent = sToTime(e.target.currentTime);
  //duraion
  dur.textContent = sToTime(e.target.duration);
  slider.value = x.currentTime;
  //percent.innerHTML = x.currentTime;
  slider.max = x.duration;
  keys();
})

function sToTime(t) {
  return padZero(parseInt((t / (60 * 60)) % 24)) + ":" +
    padZero(parseInt((t / (60)) % 60)) + ":" +
    padZero(parseInt((t) % 60));
}

function padZero(v) {
  return (v < 10) ? "0" + v : v;
}
p {
  color: white !important;
}

html {
  align-items: center;
}

.mscontainer {
  position: relative;
  width: 330px;
  min-height: 460px;
  /*400px or 450*/
  background: #333;
  overflow: auto;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 10px 8px -8px #333;
  align-items: center;
  text-align: center;
}

.musicimg {
  position: absolute;
  top: 4%;
  bottom: 0%;
  width: 300px;
  height: 300px;
}

/*play/pause button*/

.btn {
  background-color: black;
  /*DodgerBlue;*/
  width: 20px;
  height: 20px;
  border: 1px solid white;
  color: white;
  padding: 20px 20px;
  cursor: pointer;
  font-size: 20px;
  border-radius: 40px;
  text-align: right;
  float: center;
  overflow: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  /*10%*/
  position: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 0%;
}

/* Darker background on mouse-over */

.btn:hover {
  background-color: white;
}

.slider {
  -webkit-appearance: none;
  width: 90%;
  margin-top: 5%;
  /*2%*/
  height: 5px;
  /*15px*/
  border-radius: 5px;
  background: solid white;
  /*#4CAF50*/
  opacity: 1;
  position: center;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  /*25px*/
  height: 20px;
  /*25px*/
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

img {
  margin-top: 5%;
  margin-bottom: 0%;
  margin-left: auto;
  margin-right: auto;
}
.percent-container {
    position: relative;
    height: 30px;
}
.percent {
    position: absolute;
    top: 2%;
    color: white;
    display: inline-block;
    left: 20px;
}

.percentt {
    position: absolute;
    color: white;
    display: inline-block;
    right: 20px;
}

.sectiona {
  position: relative;
  top: 40%;
}

.audiotitle {
  overlay: auto;
  margin-bottom: 4%;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  color: white;
  text-align: center;
  font-size: 26px;
}

.audiomaker {
  overlay: auto;
  margin-bottom: 0%;
  /*2%*/
  margin-top: 1%;
  /*-5%*/
  margin-left: auto;
  margin-right: auto;
  color: white;
  text-align: center;
}

.fwdbtn {
  /*background-color: lime;*/
  position: center;
  width: 50px;
  height: 30px;
  border: none;
  color: white;
  float: center;
  overflow: auto;
  cursor: pointer;
  font-size: 22px;
  border-radius: 30px;
  text-align: center;
  float: center;
  overflow: auto;
  margin-left: auto;
  margin-right: 20%;
  margin-top: -13.6%;
  /*-14*/
  position: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 0%;
}

.rwdbtn {
  /*background-color: lime;*/
  position: center;
  width: 50px;
  height: 30px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 22px;
  border-radius: 30px;
  text-align: center;
  float: center;
  overflow: auto;
  margin-left: 20%;
  margin-right: auto;
  margin-top: -8.9%;
  /*-8.9%*/
  position: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 0%;
}

.dropbtn {
  background-color: none;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-left: 80%;
  /*80*/
  position: absolute;
  right: 0;
}

.dropbtnpos {
  margin-left: 35%;
  cursor: pointer;
  float: center;
  overflow: auto;
}

.dropdown {
  position: relative;
  display: block;
  align-items: center;
  height: 51px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: none;
  width: 331px;
  overflow: auto;
  margin-left: 0%;
}

.dropdown-content a {
  color: white;
  /*padding: 16px 50px;*/
  padding: 10px 50px;
  text-decoration: none;
  text-align: left;
  display: block;
  border-top: 0.9px solid #9B9898;
}

.dropdown a:hover {
  background-color: #ddd;
  color: black;
}

/*#ddd*/

.dropdown-content li {
  list-style: none;
}

.show {
  display: block;
}

.dropbtnclick {
  color: lime;
}

.playlistnames {
  color: white;
  text-align: left;
  border: 0.7px solid white;
}

.Playlistartist {
  color: lime;
  text-align: right;
}

.Playlistartist:hover {
  color: white;
}

.Containeralert {
  width: 330px;
  min-height: 460px;
  /*400px or 450*/
  background-color: darkgray;
  overflow: auto;
  margin: 20px/auto;
  border-radius: 10px;
  border: none;
  box-shadow: 0 10px 8px -8px #333;
  position: scroll;
  align-items: center;
  text-align: center;
  z-index: 232;
  -webkit-filter: blur(8px);
}

.Containeralertext {
  z-index: 243;
  overflow: auto;
}

.shufflebtn {
  background-color: none;
  position: absolute;
  width: 50px;
  height: 30px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 22px;
  border-radius: 30px;
  text-align: center;
  float: center;
  overflow: auto;
  margin-left: 26%;
  margin-right: auto;
  margin-top: -7%;
  /*-9.1%%*/
  align-items: center;
  justify-content: center;
  margin-bottom: 0%;
}

.simg {
  width: 50%;
  height: 50%;
  margin-right: 50%;
}

.dropbtn2 {
  background-color: none;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-right: 80%;
  /*80*/
  position: absolute;
  left: 0;
}
<!DOCTYPE html>
<html>

  <head>

    <link rel="stylesheet" href="https://stackoverflow.com/questions/52333300/styles/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>
    <div class="mscontainer" id="container">
      <audio id="myAudio" title="I Like Me Better">
      <source src="https://iplock.weebly.com/uploads/9/5/7/3/95731436/i_like_me_better__bass_boosted_.m4a">
    </audio>

      <img id="AlbumArt" class=“musicimg” src="https://is4-ssl.mzstatic.com/image/thumb/Music117/v4/c5/5f/e5/c55fe54a-8696-396b-977d-05d6e1000d6b/5056167100188_1.jpg/268x0w.jpg" width="250" height="250">

      <p id="audiotitle" class="audiotitle"></p>
      <p id="artist" class="audiomaker"></p>

      <section class="sectiona">
        <div class="percent-container">
          <p id="currentlbl" class="percent">00:00:00</p>
          <p id="durationlbl" color="“white”" class="percentt">00:00:00</p>
      </div>

        <input type="range" min="0" max="" value="0" class="slider" id="myRange">
      </section>

      <div type="button" onclick="playAudio()" id="button" class="btn"><i class="fa fa-play"></i></div>
      <div type="button" onclick="playAudio()" style="visibility:hidden;" id="button2" class="btn"><i class="fa fa-pause"></i></div>
      <div type="button" onclick="Shuffle()" id="shufflebutton" class="shufflebtn">sh</div>
      <div type="button" onclick="next()" id="fw" class="fwdbtn">>></div>
      <div type="button" onclick="rewind()" id="bw" class="rwdbtn">
        <<</div>

          <div class="dropdown">

            <button onclick="drop()" id="Dropbutton2" class="dropbtn2"> •••</button>
            <button onclick="Dropdown()" id="Dropbutton" class="dropbtn"> •••</button>

            <div id="myDropdown" class="dropdown-content">

              <p class="playlistnames">&nbsp&nbspPlaylist 1</p>
              <a onclick="Playbutton(this.id)" id="1" song="hello Ridley nelson">I Like Me Better</a>
              <a onclick="Playbutton(this.id)" id="2">Silence</a>
              <a onclick="Playbutton(this.id)" id="3">Alone (Spotify extended version)</a>
              <a onclick="Playbutton(this.id)" id="4">Wolves</a>
              <a onclick="Playbutton(this.id)" id="5">Wilson Expensive Mistakes</a>
              <a onclick="Playbutton(this.id)" id="6">Spotlight</a>
              <a onclick="Playbutton(this.id)" id="7">Walk it Talk it</a>
              <a onclick="Playbutton(this.id)" id="8">Friends Are Family</a>
              <a onclick="Playbutton(this.id)" id="9">Imortals</a>
              <a onclick="Playbutton(this.id)" id="10">Better When I’m Dancin</a>
              <a onclick="Playbutton(this.id)" id="11">Ode to Sleep</a>
              <a onclick="Playbutton(this.id)" id="12">Shine Your Way</a>
              <a onclick="Playbutton(this.id)" id="13">Fake You Out</a>
              <a onclick="Playbutton(this.id)" id="14">Uma Therman</a>
              <a onclick="Playbutton(this.id)" id="15">Danger</a>
              <a onclick="Playbutton(this.id)" id="16">Rockstar</a>
              <a onclick="Playbutton(this.id)" id="17">Thunder</a>
              <a onclick="Playbutton(this.id)" id="18">Faded</a>
              <a onclick="Playbutton(this.id)" id="19">6/10</a>

              <li>”DISCLAIMER: We do not claim the rights for making the audio media”</li>
              <code> 
          <img class="simg" src="https://lanyxsofthtmlcode.weebly.com/uploads/9/5/7/3/95731436/p1152.png">
        </code>

              <script src="scripts/main.js"></script>
              <script src="scripts/song-list.js"></script>

            </div>
          </div>
      </div>
  </body>

</html>

Update 2:

Updated the snippet above for dropdown button alignment.

5

solved HTML aligning

’s correctly