html - CSS: making a column as wide as it can without putting 100% or causing wrap. -

html - CSS: making a column as wide as it can without putting 100% or causing wrap. -

i have 3 column div want fit on page without spilling on 3rd column below other two.

the first 2 columns cannot go beyond 200px , 3rd column has 280px minimum. causes 3rd column wider table there long sentences within td tags. there room table fit if wraps text onto line.

if set table width 100%, column 3 spills on below 1 , 2, have set fixed width table. goes against grain of trying page size itself. can't have both. there can do?

<div class="column1"> </div> <div class="column2"> </div> <div class="column3"> <table width="300px"> <!- set 100% --> </table> </div>

css

div.column1, div.column2 { float: left; max-width:280px; padding: 5px; } div.column3 { float: left; min-width:280px; padding: 5px; } .column3 table { table-layout:fixed; word-wrap:break-word; } .column3 td { white-space: normal; word-wrap:break-word; }

you need utilize calc, , if don't want <div>s wrap you'll need overflow container.

html:

<div class="overflow"> <div class="column1"> text , text , text , text </div> <div class="column2"> cakes , cakes , cakes , cakes </div> <div class="column3"> <table width="300px"> <tr><td>pie</td><td>foo</td><td>bar</td></tr> <tr><td>left</td><td>center</td><td>right</td></tr> </table> </div> </div>

css:

*{ padding:0; margin:0; } div.overflow{ min-width:700px; } div.column1, div.column2 { float: left; max-width:200px; padding: 5px; background-color:red; } div.column3 { float: left; min-width:280px; padding: 5px; background-color:blue; width:calc(100% - 410px); } .column3 table { table-layout:fixed; word-wrap:break-word; width:100%; } .column3 td { white-space: normal; word-wrap:break-word; }

http://jsfiddle.net/bbjw9/

html css