issue with div and its height

[alain]

Hi,

i have a div which contains other divs. till now nothing special.
however those div represent table headers and for sure sometime table header could be larger than the "table" itself, in this case i want to hide the part which is outside the "box".

for that i have the following css code:
.ColumnHeader
{
top : 0px;
padding : 0;
height : 20px;

float : left;
display : inline;
margin : 0;
/*vertical-align : middle;*/
/*background-color : #bfbfbf;*/
/*overflow : hidden;*/
}
.ColumnHeader span
{
float : left;
display : inline;
/*vertical-align : middle;*/
top : 0px;
padding : 0;
height : 20px;
}
#header_separator
{
top : 0px;
padding :0;
height : 20px;
border-left : solid 1px #ccc;
border-right : solid 1px #fff;
float : left;
display : inline;
overflow : hidden;
}
#table_container
{
overflow : hidden;
background-image : url("images/bk_title.gif");
background-repeat : repeat-x;
height : 20px;
/*display : inline;*/
/*float : left;*/
}

the html code is generated via jQuery but you can see the extract on the screenshot.

i do not understand why the last column header is below the others as i want it to be beside the "birth date" column header...as the others are.

i have to confess that my mind is mixed now...maybe there is something simple that i miss in my css code.

thanks for help.

[Fang]

It's tabular data, use a table.