All geek questions in one place

Mix% and px <div> sizes

I have been struggling with this and for centuries. I want to:

  • Div 100% window height, 50% of width, left = 0%, red
  • div 100% of the height of the window, 50% of the width, left = 50%, green
  • A div 100% window height, 800 pixels wide, horizontal, blue

So, the first two divs form a 2-tone background, on which the 3rd div (containing the entire content of the page) is centered. I almost worked with both backgrounds:

<!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 does not work on FF3. As far as I know, the combination of z-order: -1 and position: absolute makes divs appear behind the body element (strange, but the one that Firebug shows).

Can someone tell me how to achieve this? It is forbidden to use javascript. I decided that one of the options is to set the body red, and then only need one additional div for the green part, but I'm not sure if this helps?

EDIT: SO did not show my DOCTYPE tag. Suggestions do not work with this.

+4
source share
3 answers

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 square is centered, and the contents of your page may enter it.

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

+1
source

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

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

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; }
+2
source

You can always compensate for the body setting on z-order:-2 to bring it back.

0
source

Source: https://habr.com/ru/post/1299495/

More articles:


All Articles