Using CSS3 keyframes to animate divs sliding, but divs pushing other div

Question

I am making a sliding nav bar without the use of JavaScript.

Everything is working great except one thing: When the divs get to their final position (at 100% of the keyframe,) the left div pushes the top div to the bottom of the document.

I have tried position: absolute, but that was to no avail. I tried Having left div's width set to 6% and the top divs width set to 94%, but when the user shrinks his or her browser it breaks instantly.

HTML:

<div id="left_bar"><p>This is sparta!</p></div>
<div class="top_bar">This is not Sparta!</div>

CSS:

/* LEFT SIDEBAR*/
#left_bar {
-webkit-animation:myFirst 3s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
font-size: .2px;
padding-left: 5px;
float: left
}


/* LEFT SIDEBAR ANIMATION*/
@-webkit-keyframes myFirst /* Safari and Chrome */{
    0% {
        background: orange;
        width: 6%;
        height: 0px;
        margin-top: 100%;
    }
    100% {
        background:orange;
        width: 6%;
        height: 100%;
        opacity: 0.7;
        font-size: 16px;
    }
}
/* TOP SIDEBAR*/
.top_bar {
background-color: black;
-webkit-animation:mySecond 3s;
-webkit-animation-fill-mode: forwards;
float: right;
}

/* TOP SIDEBAR ANIMATION*/
@-webkit-keyframes mySecond /* Safari and Chrome */{
    0% {
        background: orange;
        width: 0%;
        height: 8%;

    }
    100% {
        background:orange;
        width: 94%;
        height: 8%;
        opacity: 0.7;
    }
}

jsFiddle NOTE: jsFiddle is making it look entirely different. the left sidebar does not take up 100% of the height, but when the top sidebar takes up 94% of the page, it shows the top bar jump underneath the left sidebar.

Answer 1

The problem is due to the fact that you have padding-left:5px; on #left_bar. Remove it and your problem is fixed

An alternate sufficient solution would be to use calc to shorten with width of one of them by the same amount

@-webkit-keyframes mySecond {
    ...
    100% {
        width: calc(94% - 5px);
        ...
    }
}    

Demo here