Creating 2 columns within a page

Staging server site I’m referencing – http://ehub23.webhostinghub.com/~gushar5/?page_id=15

The Goal:
I want the look of this list of video thumbnails + descriptions in two columns so users don’t need to scroll down so far.

The Attempt:
I tried to create two divs within the HTML of the page, .videoColumn1 and .videoColumn2.

I created all the content equally, and tried putting half in the first div and half in the second.

For the CSS, I tried something like…

.videoColumn1 {
        width:45%;
        margin-right:50%;
        float:left;
}

.videoColumn2 {
        width:45%;
        float:right;
}

It effectively created a look of two columns, but the second column didn’t start until the very end of the first column. I want them side-by-side and flush at the top of the page.

For now, I’ve just used 1 column aligned towards the center of the page, but I want to figure out how to get that second column and have both of them be right next to each other.

One thing I guessed may be causing this is the <br style="clear:both"> i used under each video listing. Without this, wordpress won’t put a line break under each listing, causing them to cascade diagonally down the page.

Any help would be much appreciated!