Slide in left and right width exceeds

StackOverflow https://stackoverflow.com/questions/23436015

  •  14-07-2023
  •  | 
  •  

Question

I have used Animate.css for creating a left and right slide in effect. I can't figure out why the slides are adding up to the invisible width. Could any of you help me?

http://jsfiddle.net/itsnamitashetty/CKgX8/1/

        <style>
            body{
                margin:0;
                padding:0;
            }

            #animationentry{
                width:100%;
                height:700px;
                margin:0;
                padding:0;
                background:green;
                display:block;
            }
            #cww_bg{
                display:block;
                float:left;
                width:50%;
                background:red;
            }
            #crw_bg{
                display:block;
                float:left;
                width:50%;
                background:yellow;
            }
        </style>

        <link type="text/css" rel="stylesheet" href="css/animate.css">

    </head>

    <body>
        <div id="animationentry">

        <div id="crw_bg" class="animated slideInLeft">
            <img src="images/crw.jpg">
        </div>

        <div id="cww_bg" class="animated slideInRight">
            <img src="images/cww.jpg">
        </div>

        </div>
    </body>
</html>
Was it helpful?

Solution

Fiddle: http://jsfiddle.net/CKgX8/2/

Add overflow: hidden; to #animationentry

#animationentry{ overflow: hidden;}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top