Force a div to "float" next to iframe?

I'm working on a responsive site and recently manage to get a vimeo clip to become responsive by using the embed code at http://embedresponsively.com/.

Only problem is that when ever I try to get a div to float next to the embedded iframe the Vimeo movie disappears? And the div wont display next to the iframe within the wrapper neither.

Does someone know how to force a div to display next to (to the right) a iframe without using float or inline-block since that won't work(?) and at the same time keeping the scaling/responsive effect of the vimeo-movie?

Thank you in advance!

HTML:

<body>

<div class="case_wrapper">
    <div class="movie_wrapper">
        <div class='embed-container'>
            <iframe src='http://player.vimeo.com/video/18085160' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen>
            </iframe>
        </div>
    </div>
    <div class="movie_info"></div>
</div>

</body>

CSS:

.case_wrapper {
    width:1200px;
    height:500px;
    background:#5340AA;
}   

.movie_wrapper {
    max-width:860px;
    max-height:500px;
}

.movie_info {
    width:300px;
    height:500px;
    margin-left:40px;
    background:#53FF00;
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    height: auto; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

Solution

You just need to add width: 100% to .movie_wrapper and then you just add float: left to .movie_info and .movie_wrapper and it will work. The issue why the video was missing when you added float left is because the video didn't had a width, you just had a max-width to it and with float left it didn't get the width (the .movie_wrapper had width: 0 and height: 0), so you need width: 100% so it can spread ( or to have a width) and then just add max-width to it.

Working example here http://jsfiddle.net/ugpdz7qu/

.case_wrapper {
    width:1200px;
    height:500px;
    background:#5340AA;
}   

.movie_wrapper {
    width: 100%;
    max-width:860px;
    max-height:500px;
    float: left;
}

.movie_info {
    width:300px;
    height:500px;
    margin-left:40px;
    background:#53FF00;
    float: left;
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    height: auto; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}