body{
    overflow: hidden;
    margin: 0;
}
#container{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #cdc;
}
#header, #footer{
    position: absolute;
    width: 100%;
    height: 3em;
    background: orange;
}
#header{
    top: 0;
}
#footer{
    bottom: 0;
}
#columnOne, #columnTwo{
    position: absolute;
    top: 3em; bottom: 3em;
}
#columnOne{
    left: 0; right: 75%;
    width: 100%;
    background: blue;
}
#columnTwo{
    left: 25%; right: 0;
    background: #ccc;
}
@media all and (min-device-width: 600px) and (min-device-height: 600px){
    body{
        margin: 5px;
        background: transparent url("img/background.png") 0 0 no-repeat;
    }
    #container{
        width: 390px;
        height: 390px;
    }
}
@media all and (max-device-width: 400px) and (max-device-height: 400px){
    #columnOne, #container.showOne #columnOne, #container.showTwo #columnTwo{
        left: 0;
    }
    #columnTwo, #container.showTwo #columnOne, #container.showOne #columnTwo{
        left: 100%;
    }
}