I am writing a website as a collection of all my stuff (blog posts, YouTube vids etc.) and want to have a page of YouTube embeds. I want to have two columns of embeds, but cant figure out how to. If I edit the css and make the certain bits float to the correct side, it changes nothing. This is what my edited css looks like:

    div.leftBodyVideo{
width: 45%;
float: left;
}

div.rightBodyVideo{
width: 45%;
float: right;
}

I then changed the html to align the correct tags right, but that didn't work either. it put the iframes that are meant to be right aligned in a weird position:

https://lh3.googleusercontent.com/-sur00UJ5A2c/Vb-7rkMrGlI/AAAAAAAAAHk/ZO3CpEcpoQ4/w426-h237/Capture.PNG

Here is the html:

    

    
Pyraminx ao12 16 46
    
    
TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx
    
    
Tutorial - sl1pg8r symbol with a cube
    



    
Lubing DaYan ZhanChi Cube
    
    
Cubing - 2x2 ao5 36.9
    
    
Mindcuber Demo and Explaination
    

How can I fix this and get them aligned in 2 columns?

Thanks!