Mixture of % and px <div> sizes
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">
<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.
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;
}
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">
<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.
You could always compensate by setting the body to z-order:-2 to push it back.
加载中,请稍侯......
精彩评论