Hi all,
I have a problem with floating two fixed-width columns in a layout I am working on.
What I am after is a 620 pixels wide left column and, on its right, a 384 pixels one. They both should be 100% high.
This is how I am trying to achieve 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%;
}
html>body #wrapper {
height: auto;
}
#white_band {
width: 620px;
height: 100%;
min-height: 100%;
background-color: teal;
}
html>body #white_band {
height: auto;
}
#grey_band {
width: 384px;
height: 100%;
min-height: 100%;
background: url(../img/grey_band.gif) repeat-y;
float: right;
}
html>body #grey_band {
height: auto;
}
But it does not seem to work. Making the wrapper 1008px wide helps, but only in IEWin. In Safari or Firefox only some pixels of the larger column are visible, and it's only a few pixels high.
Any suggestions? Thank you.