div overflow

[alain]

Hi,

i have a div with 20px as height.
in this div i have several divs which act like column headers.

when all divs (column headers) have a total width more than their parent div, the parent div increase its height and store as 2nd row the other divs.

what i would like it's to display all children divs in 1 single row and if their total width is larger than their parent div, they should not be displayed...
how can i do that ?

i tried overflow : hidden as CSS property for all children divs but without success. (see screenshot)

thx.

[alain]

Basically, when i use the followinf css properties :
.jARGrid_div
{
font-family : verdana,serif;
font-size : 10px;
background-color : #ffffff; /*#ece9d8;*/
border-width: 1px;
border-style : solid;
border-color : #aca899;
}
.GridTitle_div
{
font-weight : bold;
font-size : 12px;
padding : 3px 0px 5px 5px;
height : 12px;
vertical-align : middle;
background-color : #ece9d8;
}
.grid_header_div
{
background-image : url('standard/column_header.gif');
background-repeat : repeat-x;
float : left;
height : 19px;
overflow : hidden;
}
.column_header,
.last_column_header
{
height : 19px;
margin : 0;
padding : 0;
display : inline;
float : left;
cursor : default;
overflow : hidden;
}

i get what is on the screenshot.
however, i would like to have column txt(headers) side-by-side and when their total width is larger than the main div, the content of the last headers should be hidden... to make my grid works like a simple grid view from windows (e.g)