CSS column widths: "as wide as needed" and "whatever's left" -


i have webpage looks like:

<table>     <tr>         <td style=white-space:nowrap>             lots of content...         </td>         <td>             more content         </td>     </tr> </table> 

this works nicely. left column takes width needs , right column takes as can. right column includes lot of automatic line-wrapping.

i'd in pure css because semantically speaking there's nothing tabular. try either requires hard-coding widths or puts right column underneath left column. there way?

float left column, , make right column non-floated overflow:hidden. cause right column automatically fill remaining width, without wrapping around below left column.

jsfiddle demo

.column1 {     float: left; } .column2 {     overflow: hidden; } 

this trick tested fine in browsers except ie6 (which shouldn't matter @ point).


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -