html - Cross-browser sizing of floated divs inside of floated divs -

I want to get the behavior of the following size on one line of data. The 'ABCD ...' field is a variable size, and I think it will be displayed as much as possible, as all other fields have taken their required space. The '0123 ...' field is a variable size, and I must first display it immediately after the field. 'X' field is a known fixed size, and I should pin it from the right side.

  | Abcdefghijklmnopqrstuvwxyz | 0123456789 | | X | | Abcdefghijklmnopqrstuvwxyz | 0123456789 | | X | | Abcdefghijklmnopqrstuvwxyz | 0123456789 | | X | | Abcdefghijklmnopqrstuvwxyz | 0123456789 | X | | Abcdefghijklmnopqrstuvwx | 0123456789 | X | | Abcdefghijklmnopqrstuv | 0123456789 | X | | Abcdefghijklmnopqrst | 0123456789 | X |  

I have tried several table-based and floating div approaches, but nothing is fine in all browsers. Here's an approach that works with WebKit, but not others.

  & lt; Div style = "width: 300px" & gt; & Lt; Div style = "float: right; width: 20px" & gt; X & lt; / Div & gt; & Lt; Div style = "overflow: hidden" & gt; & Lt; Div style = "float: left" & gt; & Lt; Div style = "overflow: hidden" & gt; & Lt; Div style = "float: right" & gt; 0123456789 & lt; / Div & gt; & Lt; Div style = "overflow: hidden, white-space: iPod" & gt; Abcdefghijklmnopqrstuvwxyz & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Some nested Dev Webkit is not required, but I was trying to work in other browsers. Anyone have ideas to solve this? Thanks!

I forgot the question for the first time, and since my answer was not anywhere, I decided to change it completely with proper solution to keep the answer clear. Anyway, this should do the trick:

CSS

  .ro {width: 300px; }. Clear {clear: both; }. Col_1 {float: left; Status: Relative; Width: 280px; Hidden flurry; } .col_2 {status: absolute; Background: #FFF; Top: 0; Correct: 0; White-space: Abrop; }. Col_3 {float: right; Width: 20px; }  

HTML

  & lt; Div class = "row" & gt; & Lt; Div class = "col_1" & gt; Abcdefghijklmnopqrstuvwxyz & lt; Div class = "col_2" & gt; 0123456789 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "callon" & gt; X & lt; / Div & gt; & Lt; Div class = "clear" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - again as needed - & gt;  

The only thing needed is to change the background of .col_2 , so it's a . Col_1 matches additional content .col_1 behind .col_2 .

Hope it helps!