tags:

views:

110

answers:

3

I've been struggling with this on and of for ages now. What I want is:

  • A div 100% of the window height, 50% of the width, left=0%, red
  • A div 100% of the window height, 50% of the width, left=50%, green
  • A div 100% of the window height, 800px wide, horizontally centered,blue

So the first two divs form a 2-tone background, on which the 3rd div (containing all the page content) is centered. I almost got it working with the two background-divs like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="background-color:black">
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: red"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: green"></div>
</body>
</html>

However it doesn't work on FF3. As far as I can tell the combination of z-order:-1 and position:absolute causes the divs to be rendered behind the body element (weird but that's what Firebug is showing).

Can anyone tell me how to achieve this? No javascript allowed. I figured one option is to set the body background red, and then only need one additional div for the green part, but I'm not sure it helps?

EDIT: SO wasn't showing my DOCTYPE tag. Suggestions don't work with that in.

A: 

You could always compensate by setting the body to z-order:-2 to push it back.

Joel Coehoorn
I thought setting a `-n` `z-index` always had the same effect regardless of the value of `n` - ie directly behind the container element.. not `n` positions behind...
prodigitalson
+2  A: 

Without complicating things with z-order and absolute positioning try the following

Use any basic graphics editor and make a 2000 x 1 pixel image and make the left half red and the right half green. Save the image as bg_tile.jpg and use the following mark-up

HTML:

<body>
    <div id="wrapper">
    </div>
</body>

CSS:

body {
  width: 100%;
  height: 100%;
  background-image: url(images/bg_tile.jpg);
  background-position: 50% 0;
  background-repeat: repeat-y;
}

#wrapper {
  width: 800px;
  margin: 0 auto;
  height: 100%;
  background-color: #0000FF;
}
Phaze Phusion
Are you sure browsers won't stretch the bg_tile image, rather than draw only red/green pixels?
John
I don't quite understand your comment, but for clarification I've created a live preview of my proposed solution: http://www.phaze-phusion.co.za/dev/so/index.html
Phaze Phusion
+1  A: 

I think this is what you are looking for:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;


<html>

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="padding:0; margin:0;">

  <div style="position:absolute; width:50%; height:100%; top:0; left:0; background-color:red"></div>
  <div style="position:absolute; width:50%; height:100%; top:0; left:50%; background-color:green"></div>


  <div style="position:absolute; height:100%; width:800px; margin-left:-400px; top:0; left:50%; background-color:blue">

<!-- Content goes here -->

  </div>
</body>
</html>

This works for me in Firefox 3.6. The blue box is centered and the content of your page can go inside it.

UPDATE: Here is an updated version that works with the !DOCTYPE string. Again I have only tested this Firefox 3.6. Let me know if this works for you.

amicitas
It works in Firefox but not in IE8.
Bertine
If you add a doc-type it doesn't work in any browser.
John
Above I used `position:absolute;` for the blue box, however, this works with `position:fixed;` as well (in FF3).
amicitas
John