Child Div appears on new line
===

I'm having an issue with some child elements within a div. The parent div is the header, which is supposed to hold a three column header in theory. There is the left column, which will be a slideshow, the middle which will be a 20px divider and the right, which will hold informational text.

The issue I am having is that the only way I can seem to get the right column to stay inline is by telling the text to align right, but this doesn't work aesthetically because I need the text centered.

I wanted to just tell the DIV to float right, but when I do this the div always goes onto the next line rather than floating inside the header div. Here is the example of the issue (http://cbchaverhill.onedirectionconnection.com/), please ignore everything other than the header (haven't started working on those elements just yet).

Here is my CSS:

    div#header {
    clear: both;
    height: 300px;	
    width: 900px;
    margin-top: 0px;
    padding: 0px;
    border: 0px;
    }
 
    div#slide {
    float: left;
    clear: both;
    height: 300px;
    width: 590px;
    margin-top: 0px;
    padding: 0px;
    border: 0px;
    background: #FFFFFF;
    }

    div#divide {

     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
     overflow: hidden;
     width: 20px;
     height: 300px;
     float: left;
     background: url(/wp-content/themes/cbc/divide.png) no-repeat;

    }

    div#cbcstuff{
    display:  inline-block;
	float: right;
	clear: both;
    height: 300px;
	width: 290px;
	margin-top: 0px;
    padding: 0px;
	border: 0px;
	background: #FFFFFF;
    }

And here is the coding of the header:

    <div id="header">

    <div id="slide"></div>
    <div id="divide"></div>

    <div id="cbcstuff">
    Calvary Baptist Church<br>
    Haverhill, MA 01832
    </div>

    </div>

Can anyone give me some advice on how I can get the right column to align right without having to align the text right?

Thank you for your time!

~Noelle