PDA

View Full Version : 100% height 50% width not working in IE6



udjamaflip
Mar 23rd, 2009, 11:38 AM
Hi guys,

I have a website which needs to have 100% height background colour with 2 different coloured 50% width divs, effectively the screen between split in half and then the right is red and the left is white.

I have this HTML:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<link href="css/template.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="left-container">
I&rsquo;m full height
</div>
<div id="right-container">
I&rsquo;m full height
</div>
</body>
</html>


and this CSS:



*
{
padding:0px;
margin:0px;
}

html, body
{
height:100%;
font-size:62.5%;
font-family:Trebuchet MS, Verdana, Sans-Serif;
}

#left-container
{
height: auto !important;
height: 100%;
min-height: 100%;
background: #FFFFFF;
width:50%;
float:left;
}

#right-container
{
height: auto !important;
height: 100%;
min-height: 100%;
background:#930e1a url("images/right-bg.jpg") repeat-y top;
width:50%;
float:left;
}


Hope someone can help as at the moment IE6 shoves the right hand container underneath the left hand container.

abduraooft
Mar 23rd, 2009, 11:45 AM
Use the faux column approach (http://www.alistapart.com/articles/fauxcolumns). Make a (1px height) image having enough width and then apply it as the centered background of your body element.

udjamaflip
Mar 23rd, 2009, 11:52 AM
Problem with that is the right hand side column has a gradient image on it. Any other Ideas? :/

abduraooft
Mar 23rd, 2009, 11:56 AM
background:#930e1a url("images/right-bg.jpg") repeat-y top; Increase the height of your faux image, so as to fit your right-bg.jpg on the right side.

udjamaflip
Mar 23rd, 2009, 12:00 PM
heh, that repeat-Y should have been repeat-X, I guess If I make a really long image then it can be used and just position-right with background-color:#FFFFFF;

I'll have a shot at that, thanks for your help