'How to limit the length a css marquee can scroll?

This marquee keeps scrolling over other elements, and I have no idea why. I've tried using max-width to limit the amount of space the text is able to scroll, because I only want it to scroll over this specific container (within the red border on top of the lorem ipsum). I would prefer solutions using css marquee, but if it'd be easier using js I'll accept those answers as well. thanks!

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>
htmlcssmarquee


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions