Splitting Page With 2 Colours!

Discussion in 'CSS' started by gobbly2100, Aug 10, 2007.

0
  1. #1
    Hey,

    How could I make it so that the left 50% of the page is white and the right 50% of the page is black?

    I want it to look like that no matter what resolution people are running.
     
    gobbly2100, Aug 10, 2007 IP
  2. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #2
    Create a 2000px wide background image (height can be set to 1px) and colour first half of it in white and the second half in black. Then add the following to your stylesheet: 
    body {
 background: #ffffff url(your_image.gif) repeat-y center;
}
    Code (markup):
    That should do the trick.
     
    Clive, Aug 10, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    You can also do it without images - though to get it to work in IE is a bit tricky. Normally we could just use position:fixed, but since IE 5 & 6 don't have that, there's a IE 'workaround' that also functions in other browsers - so write once and move on.

    The trick is to force the body and html to 100% window height and set them to overflow:hidden to remove the possibility of scrollbars in all browsers. Then you apply one of your background colors to the body, then apply the other background-color to a DIV set to 50% width and 100% height. This gives you your half and half. Basically toss position:absolute atop it to remove it from flow, and we can deal with our content.

    Then you just create a container DIV set to overflow:auto so scrollbars will appear as needed and scroll the content inside your DIV without moving anything outside the container. Set Z-indexes to make sure your #container is over the 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>halfscreen demo</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

body, html {
	height:100%;
	overflow:hidden;
}

body {
	background:#FFF;
	color:#888;
}

#blackside {
	position:absolute;
	width:50%;
	height:100%;
	z-index:1;
	background:#000;
}

#container {
	height:100%;
	overflow:auto;
	position:relative;
	z-index:2;
}

</style>

</head><body>

<div id="blackside"></div>
<div id="container">
	<p>
		test content test content test content test content test content test content test content
		test content test content test content test content test content test content test content
		test content test content test content test content test content test content test content
	</p>
	<p>test content</p>
	<p>test content</p>
	<p>
		test content test content test content test content test content test content test content
		test content test content test content test content test content test content test content
		test content test content test content test content test content test content test content
	</p>
	<p>test content</p>
	<p>test content</p>
	<p>
		test content test content test content test content test content test content test content
		test content test content test content test content test content test content test content
		test content test content test content test content test content test content test content
	</p>
	<p>test content</p>
	<p>test content</p>
</div>


</body></html>
    Code (markup):
    Validates, and works in IE 5.5, 6 & 7, Opera, FF and Safari.
     
    deathshadow, Aug 10, 2007 IP