I'm having an issue with this marquee scrolling over other elements, and I can't figure out why. I attempted to use max-width to constrain the scrolling text to a specific container (within the red border on top of lorem ipsum), but it's not working as intended. I would appreciate any solutions that utilize CSS marquee, but I'm open to JavaScript solutions as well if they are easier. Thank you!
body {
background:#222;
}
#sidebar_container {
background:transparent;
border:1px solid red;
width:200px;
height:auto;
position:fixed;
top:100px;
left:220px;
}
.marquee {
animation:marquee 5s linear infinite;
}
@keyframes marquee {
0% {transform: translateX(100%);}
100% {transform: translateX(-100%);}
}
#sidebar_title {
font-family:Helvetica;
font-weight:bold;
text-transform:uppercase;
text-align:center;
color:#fff;
font-size:20px;
margin:0 0 10px 0;
}
#sidebar {
border:1px solid red;
background:transparent;
font-family:arial;
font-size:14px;
width:200px;
height:auto;
text-align:center;
}
.desc_container {
border:1px solid red;
color:#fff;
margin:10px 10px 10px 10px;
}
.desc {
}<body>
<div id="sidebar_container">
<div id="sidebar_title"><div class="marquee">Marquee Text</div></div>
<div id="sidebar">
<div class="desc_container">
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div> <!-- desc container -->
</div> <!-- sidebar -->
</div> <!-- sidebar container -->
</body>