I am "new-at-this" I have spent all day trying to figure this out. I know it is simple but I can't figure out what I am doing wrong. Sure would appreciate a little help for the learned

What I am trying to do is layout a page/template that will flow as follows:
1) 4 boxes - one for each corner (topleft - topright - bottomleft - bottomright)
These boxes are position-absolute and float - flushed - to their respect corners, relative to the size of the browser window

2) Then I want a paragraph block or image area that will center (vertically) relative to the size of the browser window, with about 10% margin on both sides.

I can not figure out how to code to get the paragraph/image area to center - vertically - within the page relative to is content size and the browser window, and of course balanced white space top/bottom below the top boxes and above the bottom boxes.

I've attached the html file - view source - to show you what I am trying for.
Click to view attachment

Solution for most browsers (excluding, as always, IE):



In order for this to work in IE as well, you'll need a bit of extra HTML and a few more lines of CSS (hacks, mostly).

See here: http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

Good luck.

Hope I am reply in the right spot -- I am panel warn out these days

Thank you for the response and code advice - greatly appreciated.