I am trying to create an html interface, where rows will be dynamically added to my web page.
The way I am currently doing it is by using nested DIVs with the CSS display style set to table.
Each row has 3 divs. The left div and the right div have a fixed width, while the middle div should expand to fit the page horizontally regardless of the length of it's content.
My problem is I'm not sure how to make that center div expand the entire remaining width of the page. With the code below, the center div is as small as the content.
I tried a solution that floated the left div left, and the right div right, however that would not let me select a row of text properly. i.e., if I started selecting the right div's content, then dragged towards the left, the left and center div would not be selected.
The solution only needs to target webkit based engines, as my code will only be used in a webkit based environment.
I forgot to mention that I also tried using tables. However I also need to avoid getting horizontal scroll bars appearing on the page when the screen is shrinking. When I use tables and shrink the page, the center div stops shrinking at a certain point (due to the fixed width percentages I guess).
My CSS code:
height = 100%;
I believe this is a solution:
border-collapse: collapse;to .chartarea to remove the double border width.
width: 100%to .chartarea to cover the entire width of the window.
width: 80%;to .message to have it grow as the window width changes.
white-space: nowrap;to .nick to control wrapping.
white-space: nowrap;to .timestamp to control wrapping.
display: table-rowin .row
Check out this fiddle