Table-cell - width: 100% with table-layout: fixed;

Question

This is the code without table-layout: fixed http://jsfiddle.net/CDUBv/11/ Needs be of table-layout: fixed because this is how it works word-wrap: break-word . Here, however, what happens if I add it: http://jsfiddle.net/CDUBv/12/ How to solve? word-break: break-all in the first page or add stable width in first div is not the solution.

Answer 1

Here is a different approach that might be close to what you need.

The HTML is:

<div id="table">
    <div id="t1">
        <img src="..."  width="50" width="50"/>
        <img src="..."  width="50" width="50"/>
    </div>
    <div id="t2">T2T2T2T2T2T2T2T2T2T ... T2T2T2T2T2T2T2T2T2T2T2T2T2</div>
</div>

and the CSS:

#table{
    display: block;
    overflow: auto;
    width: 100%;
    margin-top: 100px;
    background-color: black;
}
#t1{
    float: left;
}
#t1 img {
    vertical-align: top;
}

#t2{
    word-wrap: break-word;
    overflow: auto;
    background-color: red;
}

I floated #t1 to the left to get a shrink-to-fit width around the icons.

The content in #t2 will then fill up the remainder of the width.

The trick to get the background colors is to add the black to the parent container and the red to the non-floated child element.

Limitations

If your content is very short, the #t2 element will be shorter than #t1 so you may want to add a min-height value to preserve the color pattern (black on left, red on right).

If you want to vertically center the icons, then you may need to specify a width for #t1 and then absolutely position the icons.

See demo at: http://jsfiddle.net/audetwebdesign/5j5Hz/