For three days i have been trying to produce to boxes side by side both containg a background image + text placed in the center colum of a three colum css layout, first of all i tried using tables and i did get pretty close as you will see from the page demo here
http://www.home-of-poker.com/demo.html
The first two on the page are my second attemt using css again closer but still not what i'm after.

This is what i want 2 boxes that share and span the full width of the center colum side by side in resalutions 1024-768 and up and also contain text that can be positioned and again be fluid depending on the resalution being used.


is it actualy possible or have i got it as close as posssible?
here is the css used
/* CSS Document */

#outter {
width : 49%;
height : 245px;
top:0px;
right:10px;
padding : 0;
margin : 0;
border : 1px solid green;
position : relative;
left: 2px;
background-image: url(http://www.home-of-poker.com/demo%20...71_poker.jpg);
-o-background-size: 100%;
-webkit-background-size: 100%;
background-size: 100%;
background-position: 0% 100%;
background-repeat:no-repeat;
}
#inner {
position:absolute;
z-index : 6;
left: 10px;
top: -96px;
border : 1px solid blue;
margin-top : 170px;
margin-left : -5px;
width: 261px;
height: 167px;
}
#outter2 {
width : 49%;
height : 250px;
top:-250px;
right:-295px;
padding : 0;
margin-top: 395;
border : 1px solid green;
position : relative;
left: 290px;
background-image: url(http://www.home-of-poker.com/demo%20...%5Fpoker.jpg);
-o-background-size: 100%;
-webkit-background-size: 100%;
background-size: 100%;
background-position: 0% 100%;
background-repeat:no-repeat;
}

#inner2 {
position:absolute;
z-index : 5;
left: 324px;
top: 111px;
border : 1px solid blue;
margin-top : 170px;
margin-left : -5px;
}
thanks for looking