Posicionar 3 capas centralmente al lado de otra

[JuJoGuAl]

Tengo una web donde uso un Formlario de Loggin, en dicho formulario busco situar 2 capas al lado para ponerle una imagen de un borde degradado como se muestra en la imagen:


mi codigo html es:

Código HTML:

<div class="logueo_back">
    <div class="logueo">
     <div class="logueo" id="img_ajax">
                <img src="images/ajax-loader.gif" border="0" alt="Cargando" title="Cargando" style="margin-top:95px;" />
            </div>
        <div class="body_left" id="body_left"></div>
        <div class="body_center" id="body_center">
            <div id="log_error">
                Usuario o Contrase&ntilde;a inv&aacute;lidos
            </div>
           
            <div class="loginbox">
                <span>Iniciar sesi&oacute;n</span>
                <form name="login" id="login">
                    <input name="username" id="username" class="status" value="Usuario" type="text"/>
                    <input name="pass_txt" id="pass_txt" class="status" value="Contrase&ntilde;a" type="text"/>
                    <input name="pass" id="pass" class="status" value="" type="password" style="display:none;" />
                    <input value="Entrar" type="submit" class="btnlogin"/>
                </form>
            </div>
        </div>
        <div class="body_right" id="body_right"></div>
    </div>
</div>
 

css:

Código CSS:

/*Esta capa contiene los 2 bordes y el Form de Inicio*/
.logueo {
    /*top: 135px;*/
    /*top: 34px;*/
    text-align:center;
    position:absolute;
    margin:auto;
    padding:0;
    float: left;
    width: 100%;
    height: 100%;
    border: 1px solid #F00;
}
#body_left{
    float: left;
    padding: 0;
    width: 87px;
    /*width: 25%;*/
    height: 100%;
    margin-left: 25%;
    background-size: 87px 100%;
    background-image: url(../images/body_left.png);
    background-repeat: no-repeat;
}
#body_center{
    float: left;
    margin: 50px 50px;
    /*width: 50%;*/
    padding: 0;
}
#body_right{
    float:right;
    padding: 0;
    /*width: 25%;*/
    margin-right: 25%;
    width: 87px;
    height: 100%;
    background-size: 87px 100%;
    background-image: url(../images/body_right.png);
    background-repeat: no-repeat;
}
/*Centra el IMG_Ajax*/
.logueo_back {
    position:absolute;
    top: 103px;
    z-index: 2;
    height: 100%;
    width: 100%;
    float:left; 
}
.loginbox {
    width: 350px;
    margin: auto;
    padding-top: 8px;
    padding-right: 0;
    padding-bottom: 8px;
    padding-left: 0;
    height: 180px;
}
.loginbox span {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    background-color: #c1d72e;
    float: left;
    width: 338px;
    height: 23px;
    padding-top: 7px;
    padding-right: 6px;
    padding-bottom: 0;
    padding-left: 6px;
    margin-bottom: 20px;
    display: block;
} 
.btnlogin {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #c1d72e;
    height: 30px;
    border: 4px solid #c1d72e;
    margin-top: 10px;
    margin-left: 124px;
    float: left;
    width: 101px;
}
 

Pueden ayduarme?