NEED HELP. CSS 50/50 Page Split Hotizontal

[Richard Cousins]

Im currently creating a website for the company I work for and they want a background which is split horiziontally 50/50.

We then want to have the content in the centre of the page with 2 images and the images will line up with the background.

Ive found lots of code on how to do this vertically but not horizontally and I am totally stuck and am in need of some help please.

Heres an image of how I want it to look.

http://i.imgur.com/wOWEm.jpg

So Im looking to get a repeated image for the top 50% of the screen and a different repeated images for the bottom hald, which will always be 50/50 split even if the window is resized.

Is this possible?

Many Thanks,

Richard

[coothead]

Hi there Richard Cousins,

check out the attachment for a working example.

[Richard Cousins]

coothead, thank you so much

You are the man or woman!

Seriously its one thing explaining the code but giving me an awesome example like that.

Many Thanks

[Richard Cousins]

I just have one question.

How can I change the height without affecting the line up on the content so that it still matches up with the background.

I think the size we want is something like 960 wide x 700 high.

I will be putting all the conent into the 960 gid system.

[coothead]

Hi there Richard Cousins,

being asexual appears to give me more time to write code without distractions.

For a a 960x700 content area use this CSS instead...

html,body {
    margin:0;
 }
body {
    min-height:700px;
    background-image:url(../images/body-bg.jpg);
    background-position:center center;
 }
#vertical {
    float:left;
    width:100%;
    height:50%;
    margin-top:-350px;
 }
#container {
    clear:both;
    width:960px;
    height:700px;
    margin:auto;
    background-color:#f00;
    box-shadow:#111 20px 20px 40px;
 }
#top,#bottom {
    height:302px;
    padding:20px;
    border:4px solid #872021;
    background-color:#2b2b2b;
    color:#872021;
    overflow:auto;
 }
#bottom {
    border-color:#2b2b2b;
    background-color:#872021;
    color:#2b2b2b;
 }

coothead

[Richard Cousins]

Thanks great!

I think im starting to figure out how it works.

Whats got my puzzeled is now the container is stuck to the top of the page. it is centered and splits where the graphics split but can it load in the centre of the screen horizontally and vertically? yet still line up with the background?

[coothead]

Hi there Richard Cousins,

your requirement will require a little javascript.

check out the attachment, to test it.

[Richard Cousins]

Hi coothead.

Ive tried the latest version but for some reason the content area still appears at the top of the screen and not in the centre. Is this correct?

Ive tried it in 4 different browsers and its all the same.

[Richard Cousins]

Ive been looking at the three examples you gave me and it seems that the first example works exactly how id like it to but the high over the content box is just not high enough.

With the other 2 options it seems that because the height has been increased it has made the content box again to the top of the page.

[Richard Cousins]

OK. Ive managed to sort out the background my just aligning it center center so that it will always be a 50/50 split.

Now how to I align the container to float in the center of the screen, horizontally and vertically?