Two column layout: Problems with column - html

Question

I created a simple two column layout based on this:
How to control overflow of table cell in Firefox?.
The left columns should be scrollable (top-down) and the right one should be fix.
HTML:
<div id="col1">
<div id="list">
<div class="row">Test 1</div>
<div class="row">Test 2</div>
<div class="row">Test 3</div>
<div class="row">... more rows</div>
</div>
</div><div id="col2"></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #0c0;
}
#col1 {
width: 25%;
height: 100%;
display:inline-block;
background-color: #c00;
}
#col1>#list {
width: 100%;
overflow: auto;
}
#col1>#list>.row {
padding: 5px;
border-bottom: 1px solid #ccc;
}
#col2 {
width: 75%;
height: 100%;
display:inline-block;
background-color: #00c;
}
Please see this demo:
http://jsfiddle.net/bitas/qRtjN/
Firefox 18.0.2 shows it nearly as expected. In other browsers the left column doesn't start at the top of the page but in the lower left corner.
It works as expected if I remove the "div#list". What's wrong with this div? How I can I fix it?

Answer 1

I have modified your CSS a bit and it does work. Here it is:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #0c0;
}
#col1 {
width: 25%;
height: 1000px;
display:inline-block;
background-color: #c00;
}
#col1>#list {
width: 100%;
height: 100%;
overflow: auto;
}
#col1>#list>.row {
padding: 5px;
border-bottom: 1px solid #ccc;
}
#col2 {
width: 75%;
height: 100px;
display:inline-block;
background-color: #00c;
position:fixed;
top:0;
right:0;
}

Answer 2

Adding this CSS will correct the alignment of your columns:
#col1, #col2 {
vertical-align: text-top;
}
http://jsfiddle.net/qRtjN/13/