Home/ Questions/Q 8911489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:57:27+00:00

My animation script modifies the absolute position of div text elements. I’m trying to

  • 0

My animation script modifies the absolute position of div text elements. I’m trying to figure out the best approach to keep the elements from overlapping on a window or text resize. Ideally it would take on a liquid layout.

Any help that can be given is appreciated! Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
    .slogan
    {
        font-weight: bold;
        font-size: 1.5em;
        width: 12em;
        margin: 0.5em;
        cursor: pointer;
    }
    #slogan1
    {
         position: absolute;
         left: -250px;     
         margin-right: 1em;                    
    }
    #slogan2
    {
         position: absolute;
         left: -250px; 
    }
</style>
<script type="text/javascript">

    window.onload = slideRight;

    function slideRight() {                  
        //code that slides slogan1 and slogan2 into place on page load   
        //by assigning to divElement.style.left recursively
        slider = document.getElementById('slogan1');
        slider.style.left = '5%';
        slider = document.getElementById('slogan2');
        slider.style.left = '50%';
    }               
</script>
</head>
<body>
<div class="slogan" id="slogan1">Some
    <div id="rep1">
        <p>Some copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890?</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890!</p>
    </div>
</div>          
<div class="slogan" id="slogan2">Slogan
    <div id="rep2">
        <p>Some copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890?</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890!</p>
    </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t.. its exactly why position absolute should be avoided whenever possible.

    Position absolute means pixel fixed at a certain location.. if you resize your window the elements will keep the location you give them, if that means they will overlap, thats what they will do.

    If you want your content to adjust to screen size, use floating elements instead of absolutely positioned elements.

    • 0