Update:
it seems to work in Safari and Firefox if I do like this:
HTML Code:
<body>
<div id="wrapper">
<div id="grey_band"></div>
<div id="white_band"></div>
</div>
</body>
Code:
* {
margin: 0;
border: 0;
padding: 0;
}
body, html {
height: 100%;
}
#wrapper {
width: 1004px;
height: 100%;
min-height: 100%;
background: url(../img/wrapper_bg.gif) fixed repeat-y;
}
#white_band {
width: 620px;
height: 100%;
min-height: 100%;
background-color: teal;
}
html>body #white_band {
height: auto;
}
#grey_band {
width: 384px;
height: 300px;
min-height: 300px;
float: right;
background-color: red;
}
html>body #grey_band {
height: auto;
}
#logo {
margin: 37px 0 0 37px;
}
But in IEWin the left column (white_band) starts underneath the floated grey_band (which is on the right).. help?