ansaurus

Question

Answer 1

A:

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

Joel Coehoorn 2010-01-27 00:20:03

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 2010-01-27 00:58:46

Answer 2

+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 2010-01-27 00:24:05

Are you sure browsers won't stretch the bg_tile image, rather than draw only red/green pixels?

John 2010-01-28 19:51:34

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 2010-01-29 01:18:11

Answer 3

+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 2010-01-28 10:51:45

It works in Firefox but not in IE8.

Bertine 2010-01-28 19:58:07

If you add a doc-type it doesn't work in any browser.

John 2010-01-28 20:46:12

Above I used `position:absolute;` for the blue box, however, this works with `position:fixed;` as well (in FF3).

amicitas 2010-01-28 22:57:24

John 2010-01-31 16:22:04

ansaurus

tags:

views:

answers:

Mixture of % and px <div> sizes

related questions