How to properly center vertical text

For the whole day, I have read pretty much all I can on the subject of vertical text and for the life of me I cannot find a solution to what I believe should be ridiculously easy to do. I have a header. In it, there are three items that must line up horizontally side by side. First is a picture, second could be anything really but its size must be 20 X 150 (WxH) (or fit within that size)and then another picture. Here is what I have:

    #maincontainer{
    width: 1020px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #header{
    height: 150px; /*Height of top section*/
    float: left;
    }

    #box{
    	width: 20px;
    	height: 150px;
    	border: 1px solid red;
    }

    .verticaltext{
        font-size: 0.600em;
    	text-align: center;    
        border: 1px solid red;
        transform: rotate(-90deg) translate(-100%, 0);
        transform-origin: 0 0;
    }

	<body>
		<div id="maincontainer">
			<div id="header">
				<div>
					<img src="image/left_pic.jpg" alt="left_pic" height=150 width=250>
					<div id="box">
						<p class="verticaltext">vertical text</p>						
    				</div>
    				<img src="image/right_picture.jpg"     alt="right_pic" height=150 width=748>					
    			</div>
    	    </div>
        </div>
    </body>

This should produce three simple items side by side in a header container. Now it's all over the place - not even on the same line! (I don't need the red box but it's there to let me know how far off I am of what I really need - second pic is set at 748 to account for that border). I am baffled at how such a seemingly easy thing to do is difficult to achieve. Anyhow can sort me out?

Solution

    #maincontainer{

    width: 1020px; /*Width of main container*/
    height: 700px;
    margin: 0 auto; /*Center container on page*/
    }

    #header{
    width: 1000px;
    min-height: 150px; /*Height of top section*/
    float: left;
    }

    .box{
    	width: 250px;
    	height: 150px;
    	border: 1px solid red;
        float:left;
        margin-left:10x;
    }

    .verticaltext{
        font-size: 16px;
        float:left;
        margin-left: 10px;
        margin-right: 10px;
        vertical-align:middle;
        line-height:150px;
        transform:rotate(270deg);
    }

	<body>
		<div id="maincontainer">
			<div id="header">
				<div class="box">
				   <img src="image/left_pic.jpg" alt="left_pic" height="150px" width="250px" />
				</div>	
				<div class="verticaltext">
					Vertical text	
    			</div>
    			<div class="box">
                   <img src="image/right_picture.jpg" alt="right_pic" height="150px" width="748px">						
    			</div>
    	    </div>
        </div>
    </body>

There where alot of errors in your code, I think this is what you wanted correct? if so let me know and ill explain all the errors you had