NEED HELP. CSS 50/50 Page Split Hotizontal [Archive]

Richard Cousins

10-17-2011, 08:17 PM

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

10-17-2011, 09:58 PM

Hi there Richard Cousins,

check out the attachment for a working example. ;)

Richard Cousins

10-18-2011, 06:54 AM

coothead, thank you so much :D

You are the man or woman!

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

Many Thanks :D

Richard Cousins

10-18-2011, 08:27 AM

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

10-18-2011, 08:48 AM

Hi there Richard Cousins,

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

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

10-18-2011, 04:33 PM

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

10-18-2011, 09:17 PM

Hi there Richard Cousins,

your requirement will require a little javascript.

check out the attachment, to test it. ;)

Richard Cousins

10-19-2011, 07:14 AM

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

10-19-2011, 07:57 AM

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

10-19-2011, 08:19 AM

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?

coothead

10-19-2011, 02:12 PM

Hi there Richard Cousins,

Sorry, but it seems that I have not fully understood you requirements. :o :o :o

Never mind, try version three and see if it is any better. ;)

magicmanred

06-05-2012, 07:58 PM

Here's a question...

I'm also doing a 50/50 split page with CSS... and am having troubles with vertical align.

This is my code: The copy on each top and bottom div sits at the top of the div as the browser window auto-re sizes. Any way to get this to sit in the middle as the browser window re-sizes?

<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="keywords..." />
<meta name="description" content="description..." />
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body
{
margin:0;
padding:0;
height:100%;
}
#top_div
{
vertical-align:middle;
min-height:149px;
height:50%;
width:100%;
background-color:#999;
margin:auto;
text-align:center;
}
#bottom_div
{
vertical-align:middle;
height:50%;
width:100%;
background-color:#666;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div id="top_div">Top half</div>
<div id="bottom_div" class="pcopylg">Bottom half</div>
</body>
</html>

bernie1227

06-13-2012, 09:58 PM

Here's a question...

I'm also doing a 50/50 split page with CSS... and am having troubles with vertical align.

This is my code: The copy on each top and bottom div sits at the top of the div as the browser window auto-re sizes. Any way to get this to sit in the middle as the browser window re-sizes?

Hang on, I I understand what your saying correctly, you want the two dis tot stay in the middle of the main div as the page resizes. You'd do that by changing the margin, so that the two divs will always be a certain distance away from particular edges of the outer div. to put them in the middle, you'd want something like:

margin-top: 50%

Put that in the CSS and tell me if it works