CODEWITHSUNDEEP
htmlcsstablecell
Welly
Welly

Reputation: 315

Display:Table-Cell width issues

I have set fixed pixel width values for a three column layout, and want to use display:table-cell properties so that the columns will always snap to the height of the column div with the largest content.

I have used this technique before no problem, but I now can't seem to get the column width to fix, and instead, if the content in a div increases it makes the div wider instead of taller, at the same time this compresses the width of the adjacent cells. Obviously the whole point I'm using table-cell is to stop this happening, can anyone see what is stopping the column widths working? In the JSFiddle the widths initially look correct but if you add extra text into any of the columns you will see that it doesn't respond as I need it to.

JSFiddle here

The html/css below are as per the JSFiddle above:

<div class="container">
<div class="fwcol">
    <div class="col">
        <div class="thirds">COLUMN1</div>
        <div class="thirdm">COLUMN2</div>
        <div class="thirds">COLUMN3</div>
    </div><!--col-->
</div><!--fwcol-->
</div><!--container-->

.container {
    margin: 0 auto;
    width: 966px;
    background:red;
    overflow:hidden;
}
.fwcol {
    float: left;
    width: 966px;
}
.col {
    width:966px;
    display:table;
    border-collapse:separate;
    border-spacing:20px;
}
.thirds, .thirdm {
    display: table-cell;
    padding: 20px;
    background: #FFF;
}
.thirds {
    width: 255px;
}
.thirdm {
    width: 256px;
}

Upvotes: 1

Views: 3171

Answers (1)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

Add these two properties to .col class:

display:table;
table-layout:fixed;

You may also add "word-wrap:break-word;" to child divs to prevent overflow.

Upvotes: 3

Related Questions