CODEWITHSUNDEEP
htmlcss
Rob Sedgwick
Rob Sedgwick

Reputation: 4514

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

I have a three column div which I want to fit on the page without spilling over the third column to below the other two.

The first two columns cannot go beyond 200px and the third column has to be 280px minimum. What causes the third column to get wider is a table where there are some long sentences inside td tags. There is room for the table to fit if it wraps the text onto another line.

If I put the table width to 100%, column 3 spills over below 1 and 2, so I have to put a fixed width for the table. This goes against the grain of what I am trying to do which is to get the page to size itself. But I can't have both. Is there anything I can do?

<div class="column1">
</div>
<div class="column2">
</div>
<div class="column3">
    <table width="300px"> <!- would like to put 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;
}

Upvotes: 0

Views: 79

Answers (2)

TimSPQR
TimSPQR

Reputation: 2984

I think there are a variety of approaches. Here is one FIDDLE that uses table-cell for the columns.

FIDDLE

Does this work for you?

CSS

.cols {
    display: table-cell;
    overflow-x: wrap;
}

.left {
    min-width: 10px;
    max-width: 200px;
    height: 200px;
    background-color: red;
    color: white;
}
.middle {
    min-width: 10px;
    max-width: 200px;
    height: 200px;
    background-color: white;
}
.right {
    min-width: 280px;
    height: 200px;
    background-color: blue;
    color: white;
}

Upvotes: 2

ndm13
ndm13

Reputation: 1239

You need to use calc, and if you don't want your <div>s to wrap then you'll need an overflow container.

HTML:

<div class="overflow">
<div class="column1">
    text and text and text and text
</div>
<div class="column2">
    cakes and cakes and cakes and 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/

Upvotes: 2

Related Questions