Horizontal alignment of divs in different - html

Question

This is not a question, it is a solution, but maybe someone of you can explain why this is happening. I built a table using divs (row wrapper with white-space=nowrap and cells with display=inline-block). The header row and the rest of the table were in two different container divs with different IDs.
The code is like the following:
<div id="main_container">
<div id="header_wrapper">
<div id="header_row">
<div class="column_cell1">...</div>
<div class="column_cell2">...</div>
...other cells...
</div>
</div> --closed the header container
<div id="table_content_wrapper">
<div id="table_row">
<div class="column_cell1">...</div>
<div class="column_cell2">...</div>
...other cells identical classes as the header...
</div>
...several other table rows...
</div> --closed the table container
</div> --closed the main container
The CSS looked like:
#header_wrapper {
position:absolute;
top:100px;
height:100px;
width:100%;
}
#table_content_wrapper {
position:absolute;
top:200px;
bottom:0;
width:100%;
}
#header_row {
height:100%;
white-space:nowrap;
}
#column_row {
height:100px;
white-space:nowrap;
}
.column_cellN (all equal) {
height:100%;
width:10%;
display:inline-block;
white-space:normal;
}
No matter what I did, the header cells and the table row cells were misaligned. The only way (after a gazillion tentatives) to make them look the same has been to assign the same div ID to the header row wrapper and to the table row wrapper.
The most strange thing is that the developer tools in chrome reported that the various cells in the header and in the table had the same width in pixel, but they were actually rendered differently in the browser. Same behaviour also in IE.
Does someone know why this is happening?

Answer 1

Works for me.
http://jsfiddle.net/UMf3k/2/
Correct your css: #header_wrapper {position:relative;}