Two background images, one not appearing

Right now I have a container BG (a gradient) then a two column fixed width and I can get the one BG to appear in the left, but the right will not appear.

Heres the code:

#contentcontain {
width:100%;
top:0px;
height:276px;
background-color:#233545;
background-image:url(images/contentgradbg.jpg);
background-repeat:repeat-x;
background-position:top;
margin:auto;
}
#menuleft {
width:347px;
height:276px;
background-image:url(images/menubg.png);
background-repeat:repeat-y;
float:left;
text-align:center;
}
#menuleft ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#maincontentright {
width:653px;
height:276px;
float:right;
background-image:url(images/contentbg.png);
}

And the actual HTML on the index page:

<div id="contentcontain">
<div id="content">
<div id="menuleft">
<ul><li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Homeeee</li>
<li>Home</li></ul>
</div>
<div id="mainconentright">
</div>
</div>
</div>

Thanks

Sorry, I want to clarify 'contentbg.png' is what I can not get to appear.

Check .. there is typo in your codes

CSS

#maincontentright {

HTML

<div id="mainconentright">

:)

Haha wow this whole time I spent and its a typo, thanks man.