Height problem

[frinkky]

Hi,

Currently experimenting with a veritcally split page down the middle, one colour one side, another the other yada yada.

I have a couple div tags in the html each assigned to a different class (left1 & right1), left1 having the same background colour as the BODY as defined in the css file. right1 has the other colour defined. Now, in Firefox, the right1 colour seems to follow the 'height: 100%;' function in the css (a bit to well, it seems to add the 50px padding-top to the 100%) and looks ok - in IE6 however the right1 colour stops right after the content finishes.

Any ideas? Oh heres the link: http://storm-wind.com/2007SW/index.htm

CSS:

Code: Select all

 
/* CSS Document */

BODY {
margin: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: #B9C0E1;
min-width: 775px;
background-image: url(../images/split1.jpg);
background-position: 50%;
background-repeat: repeat-y;
}

DIV.left1 {
border: none;
position: absolute;
left: 0%;
padding-left: 0px;
padding-right: 0px;
background-color: #B9C0E1;
width: 50%;
height: 100%;
}

DIV.right1 {
border: none;
position: absolute;
left: 51%;
padding: 50px;
padding-bottom: 0px;
background-color: #3D60A5;
height: 100%;
}

[moojoo]

Maybe try this for starters:

Save some lines of code.

Code: Select all

BODY {
margin:0;
padding:0;
min-width:775px;
background:#d6e6f6; url(../images/split1.jpg) no-repeat center top;
}

The problem is, IE is not going to stretch that right column 100%.

You also have a padding-top:50px?

[frinkky]

Furry 'nuff. I'll have to try something else. Thanks for the input.

Woo, idea forming..... may be back later if it goes titsup