Fix overflow of div and adjust other elements
I am writing some HTML code and CSS code to display song data. For instance, the song name, artist, duration, etc… However, I realized that if I have a long song name then it overflows to the next line which is good. Though I noticed that when it does overflow then it will leak into the next element. So I am actively trying to find a way to adjust the other elements so non overlap. I realized I have my positioning as absolute, but even when I change my position style from absolute to relative, it still overlaps the values.
Below the code:
body { color: black; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .split-left { height: 100%; width: 20%; position: fixed; z-index: 1; top: 0; overflow: hidden; padding-top: 20px; left: 0; background-color: orange; /* background-color: #f8f7f4; */ } .split-right { height: 100%; width: 80%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; right: 0; background-color:red; /* background-color:#f7f1e3; */ } .tyler-selected { width: 270px; height: 150px; border-radius: 25px; background-color: blue; box-shadow: 0 13px 16px 0 rgba(255, 203, 25, 0.25); } .tyler-regular { margin: 20px auto; width: 80%; height: auto; text-align: center; box-shadow: 0 2px 3px #ccc; padding: 1px 1px; background-color: #f2f1ec; border-radius: 25px; text-align: left; box-sizing: border-box; transition: 0.5s; } .tyler-regular:hover{ transform: scale(1.1); background-color: #ffcb19; } .song-box { width: 40%; height: 30%; border-radius: 10px; background-color: #ffffff; margin-left: 20px; size: 30px; } .song { margin: 1px 1px 1px 1px; display: inline-block; font-size: 14px; } .dayOfWeek { margin-left: 20px; display: block; font-size: 16px; } .company-name { text-align: center; margin-bottom: 25%; } .song-name { margin: 7px 20px; display: block; font-size: 18px; } .artist-name { margin: 7px 20px; display: block; font-size: 13px; } /*******************************/ /* * RIGHT SIDE */ /*******************************/ .image-box { /* margin: 260px 960px 210px 130px; */ width: 570px; height: 570px; } img { height: 570px; object-fit: contain; border-radius: 30px; box-shadow: 0 0 46px 0 rgba(255, 203, 25, 0.3); } .track-data{ display: inline; } header { background-color: #14213d; } header::after { content: ''; display: table; clear: both; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin: 0px 35px; padding-top: 10px; position: relative; padding: 10px 20px; overflow: hidden; } nav a { color: #ffffff; text-decoration: none; font-size: 23px; letter-spacing: 0.5px; } li::after { background-color: white; content: ""; width: 0; height: 3px; left: 0; bottom: 0; transition: width 0.35s ease 0s; position: absolute; } li:hover::after { width: 100%; } .container { display: flex; align-items: center; justify-content: center; margin: 20px auto; width: 80%; height: auto; text-align: center; box-shadow: 0 2px 3px #ccc; padding: 1px 1px; background-color: #f2f1ec; border-radius: 25px; text-align: left; box-sizing: border-box; transition: 0.5s; } .song-box-main { width: 40%; height: 30%; border-radius: 10px; background-color: #fff; size: 30px; } .test { position: absolute; box-sizing: content-box; filter: drop-shadow(0px 0px 46px rgba(255, 203, 25, 0.30196078431372547)); width: 570px; height: 570px; left: 340px; top: 255px; } .song-data { position: absolute; box-sizing: content-box; width: 306.00px; height: 491.00px; left: 1040.00px; top: 335.00px; } .week { position: absolute; box-sizing: content-box; margin-top: 0.00px; margin-right: 0.00px; padding-top: 0.00px; font-size: 40.00px; font-weight: 400; } .song-box-data { display: block; position: absolute; box-sizing: content-box; width: 140.00px; height: 43.00px; left: 0.00px; top: 83.00px; } .song-styles { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: rgba(255, 255, 255, 0); text-align: left; letter-spacing: 0.63px; color: rgba(0, 0, 0, 0.8705882352941177); -webkit-text-stroke: 1.00px rgba(0, 0, 0, 0); font-size: 21.00px; font-weight: 400; font-style: normal; font-family: Eina01-SemiBold, Arial; text-decoration: none; box-shadow: none; overflow-x: unset; overflow-y: unset; white-space: pre; width: 64.00px; height: 21.00px; left: 52.00px; top: 13.00px; } .rectangle-1 { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; background-image: url(./img/rectangle16.png); background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: rgba(255, 255, 255, 0); border-bottom-color: rgba(112, 112, 112, 1); border-bottom-style: none; border-bottom-width: 1.00px; border-left-color: rgba(112, 112, 112, 1); border-left-style: none; border-left-width: 1.00px; border-right-color: rgba(112, 112, 112, 1); border-right-style: none; border-right-width: 1.00px; border-top-color: rgba(112, 112, 112, 1); border-top-style: none; border-top-width: 1.00px; border-top-left-radius: 25.00px; border-top-right-radius: 25.00px; border-bottom-left-radius: 25.00px; border-bottom-right-radius: 25.00px; -webkit-filter: drop-shadow(0px 13px 16px rgba(255, 203, 25, 0.25098039215686274)); filter: drop-shadow(0px 13px 16px rgba(255, 203, 25, 0.25098039215686274)); width: 140.00px; height: 43.00px; left: 0.00px; top: 0.00px; } .music-icon { display: block; position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; background-image: url(./img/music.png); background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; overflow-x: unset; overflow-y: unset; background-color: transparent; width: 19.02px; height: 19.47px; left: 21.00px; top: 11.53px; } .seeYouAgain { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: rgba(255, 255, 255, 0); text-align: left; letter-spacing: 1.02px; color: rgba(38, 38, 43, 1); -webkit-text-stroke: 1.00px rgba(0, 0, 0, 0); font-size: 34.00px; font-weight: 400; font-style: normal; font-family: Eina01-Bold, Arial; text-decoration: none; box-shadow: none; overflow-x: unset; overflow-y: unset; white-space: pre; width: 234.00px; height: 34.00px; left: 0.00px; top: 161.00px; } .artist-line { display: block; position: absolute; box-sizing: content-box; background-color: transparent; width: 306.00px; height: 21.00px; left: 0.00px; top: 225.00px; } .by { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: rgba(255, 255, 255, 0); text-align: left; letter-spacing: 0.63px; color: rgba(38, 38, 43, 1); -webkit-text-stroke: 1.00px rgba(0, 0, 0, 0); font-size: 21.00px; font-weight: 400; font-style: normal; font-family: Eina02-SemiBold, Arial; text-decoration: none; box-shadow: none; overflow-x: unset; overflow-y: unset; white-space: pre; width: 32.00px; height: 21.00px; left: 0.00px; top: 0.00px; } .artist-line-name { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 0.9961829781532288; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: rgba(255, 255, 255, 0); text-align: left; letter-spacing: 0.63px; color: rgba(110, 85, 2, 1); -webkit-text-stroke: 1.00px rgba(0, 0, 0, 0); font-size: 21.00px; font-weight: 400; font-style: normal; text-decoration: none; box-shadow: none; overflow-x: unset; overflow-y: unset; width: 274.00px; height: 21.00px; left: 32.00px; top: 0.00px; } .time-info { position: absolute; box-sizing: content-box; background-color: transparent; width: 112.00px; height: 55.00px; left: 2.00px; top: 276.00px; } .duration { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 0.4025520086288452; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 10px; background-color: rgba(255, 255, 255, 0); text-align: left; letter-spacing: 0.42px; color: rgba(0, 0, 0, 0.8705882352941177); -webkit-text-stroke: 1.00px rgba(0, 0, 0, 0); font-size: 14.00px; font-weight: 400; font-style: normal; font-family: Eina01-SemiBold, Arial; text-decoration: none; box-shadow: none; overflow-x: unset; overflow-y: unset; white-space: pre; width: 75.00px; height: 14.00px; left: 31.00px; top: 2.00px; } .minutes { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: rgba(255, 255, 255, 0); text-align: left; letter-spacing: 0.60px; color: rgba(0, 0, 0, 0.8705882352941177); -webkit-text-stroke: 1.00px rgba(0, 0, 0, 0); font-size: 20.00px; font-weight: 400; font-style: normal; font-family: Eina01-SemiBold, Arial; text-decoration: none; box-shadow: none; overflow-x: unset; overflow-y: unset; white-space: pre; width: 81.00px; height: 20.00px; left: 31.00px; top: 35.00px; } .clock { display: block; position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; background-image: url(assets/clock.png); background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; overflow-x: unset; overflow-y: unset; background-color: transparent; width: 18.00px; height: 18.00px; left: -1.00px; top: -1.00px; } <body> <header> <nav> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>Donations</a></li> <li><a href='contact.html'>Contact Us</a></li> </ul> </nav> </header> <div class="split-left"> <div class="company-name"> <span style="font-size: 48px;"> <i class="fas fa-headphones"></i> </span> <h1 style="display: inline-block;">BueField</h1> </div> <div class="random"> <div class="tyler-regular"> <p class="dayOfWeek">Monday</p> <div class="song-box"> <span style="color: #2C3A47; margin-left: 22px; font-size: 14px;"> <i class="fas fa-music"></i> </span> <p class="song">Song</p> </div> <p class="song-name">See you again</p> <p class="artist-name">By: Love me for your life</p> </div> <div class="tyler-regular"> <p class="dayOfWeek">Tuesday</p> <div class="song-box"> <span style="color: #2C3A47; margin-left: 22px; font-size: 14px;"> <i class="fas fa-music"></i> </span> <p class="song">Song</p> </div> <p class="song-name">See you again</p> <p class="artist-name">By: Love me for your life</p> </div> <div class="tyler-regular"> <p class="dayOfWeek">Wednesday</p> <div class="song-box"> <span style="color: #2C3A47; margin-left: 22px; font-size: 14px;"> <i class="fas fa-music"></i> </span> <p class="song">Song</p> </div> <p class="song-name">See you again</p> <p class="artist-name">By: Love me for your life</p> </div> <div class="tyler-regular"> <p class="dayOfWeek">Thursday</p> <div class="song-box"> <span style="color: #2C3A47; margin-left: 22px; font-size: 14px;"> <i class="fas fa-music"></i> </span> <p class="song">Song</p> </div> <p class="song-name">See you again</p> <p class="artist-name">By: Love me for your life</p> </div> <div class="tyler-regular"> <p class="dayOfWeek">Friday</p> <div class="song-box"> <span style="color: #2C3A47; margin-left: 22px; font-size: 14px;"> <i class="fas fa-music"></i> </span> <p class="song">Song</p> </div> <p class="song-name">See you again</p> <p class="artist-name">By: Love me for your life</p> </div> </div> </div> <div class="split-right"> <div class="test"> <img src="./img/giveon-art.jpeg" alt="Spotify Cover Art"> </div> <div class="song-data"> <h2 class="week">Monday</h2> <div class="song-box-data"> <div class="rectangle-1"></div> <p class="song-styles">Song</p> <div class="music-icon"></div> </div> <p class="seeYouAgain">See You Again</p> <div class="artist-line"> <div class="by">By:</div> <div class="artist-line-name">Wiz Knalifa ft. Charlie This is too show that when i have a really really really long string it starts to overlap the other elements in the html</div> </div> <div class="time-info"> <div class="duration">Duration</div> <div class="minutes">4:54 min</div> <div class="clock"> <i class="far fa-clock"></i> </div> </div> <audio controls> <source src="https://p.scdn.co/mp3-preview/9597944813e1a32cc263cc55ccd20153f2b6fa82?cid=907576181422448e91e222b424ba898a" type="audio/mp3"> </audio> </div> </div> </body>
