Absolute position divs with javascript/css

Question

I got this PSD design I need to code to HTML and it has a slideshow with navigation buttons next and previous in the sides of browser window (left and right), so I guess you could just do CSS position: absolute for both divs, one to left: 0 ; and other to right: 0 ; but they would stay in the sides at the top of the browser screen and according to the design they have to be in the middle of the browser's screen vertical height. So what I mean is basically eg using jsfiddle: http://jsfiddle.net/ZVL8W/ Take these blocks:

And position them like this:

So I was wondering there would be probably javascript included since those divs would be inside some deep div structure that has set width, so the slideshow control divs would somehow need to be able to move out from the set width of parent containers.

Answer 1

Check this out: http://jsfiddle.net/ZVL8W/3/
This has equal height no matter what the screen size is.

 .left-box {
        width: 100px;
        height: 100px;
        background-color: red;
        display: block;
        position:absolute;
        top:50%;
        left:0px;
        margin-top:-50px;
    }
    .right-box {
        width: 100px;
        height: 100px;
        background-color: blue;
        display: block;
        position:absolute;
        top:50%;
        right:0px;
        margin-top:-50px;
    }

Answer 2

you can do it all by CSS: http://jsfiddle.net/ZVL8W/7/

.left-box {
    width: 100px;
    height: 100px;
    background-color: red;
    display: block;
    position:absolute;
    top:50%;
    margin-top:-50px;
    left:0;
}
.right-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: block;
    position:absolute;
    left:100%;
    margin-left:-100px;
    top:50%;
    margin-top:-50px;
}