CSS3 positioning/Height issue

Question

Am working on a project where am inserting some code of CSS3 animation onto a website made with a template.

There occurred some problem where the animated items are out of size.

Here's the website(Scroll down for the animation)

Here's the fiddle of the animation if anyone wants to check that out.

Some basic code that maybe of use..

CSS:

#backgroundAnimation{
    color:#3c3c3c;
}

#containerAnimation{
    margin:0 auto;
/*    float : left;*/
    text-align: center;
    height: 100%;
    width:100%;
}

#innerWrapperAnimation{
    margin: 0 auto;
    border: 2px solid;
    float:none;
    position: relative;
    overflow:hidden;
    width:100%;
    display:block;
    height: auto;   
    background: no-repeat scroll 0 0;
    background-size: 100% 100%;
    max-width: 1460px;
}

HTML:

<div id="containerAnimation">
    <div id="innerWrapperAnimation">
        <div><img class="lightsAnimation" id="light1Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-1.png" /></div>
        <img class="lightsAnimation" id="light2Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-2.png" />
        <img class="lightsAnimation" id="cameraFlashAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Camera-Flash.png" />
        <img id="backgroundAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/bg3.png" />
        <img class="boxAnimation" id="goodBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox2" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox3" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox4" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox5" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img id="badBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-2.png" />
        <img id="pistonBase" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_base.png" />
        <img id="pistonHead" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_head.png" />
        <img id="pistonOutline" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_top.png" />
        <div id="waveDisplay"><img id="waveImage" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Vital-sign-1.png" /></div>
    </div>
</div>

Am pretty bad at css,if someone could help me out by using the firebug or any other debugger and point me out where i need to make the change. That would be great.

I think its a really small issue for you professionals out there.

Update: The height of the animated container changes within the website. I think that's the issue.

Answer 1

Your update is correct.

The <br> between your animated elements (boxes) are causing your container height to expand.

If you add the CSS: #innerWrapperAnimation br { display: none;}, it addresses your issue (or, just don't include the <br> element)

Answer 2

Try either fixing your containerAnimation or innerWrapperAnimation i.e in px in place of % and remove br tag as different browsers take different br space. To create a line space towards bottom : try margin-bottom:in px or padding-bottom:in px whichever suits you.