Question

I’m trying to do something like this :

I have three div with no fixed width. The left (red) and right (blue) areas should have the exact same width as their content (an image). The left and right area can have different width.

The center div will have some text which can be larger than the div and that should have an ellipsis.

The difficulty is that I don’t know any width and I’d like to avoid javascript.

Answer 1

HTML:

<div style="width:600px;"> <!-- 600px or the total desired width of the table -->
    <div class="column" style="border-color:red;">
        <img src="http://i.imgur.com/w57Lk.png" />
    </div>
    <div class="column" style="width:100px;">
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, 
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet
    </div>
    <div class="column" style="border-color:blue;">
        <img src="http://i.imgur.com/aPlq6.png" />
    </div>
</div>

​
CSS:

​.column {
    text-overflow: ellipsis;
    height:400px; /* or whatever */
    float:left;
    border:1px solid black;
    overflow:hidden;
    white-space: nowrap; 
}​

This uses CSS3, so it may have limited browser support.

---

Edit:

If you don’t know the desired width of the middle column, I don’t know any way do that without at least some JavaScript. Fortunately, the JS should be very simple. Using jQuery, and without the style="width:100px;" part in the HTML above:

(function($) {
    var containerWidth = $('.column').parent().width()                         
        - $('.column:first').width() 
        - $('.column:last').width()
        - 6; //6 because the borders add 1px per side, per column
    $('.column:nth-child(2)').width(containerWidth);
})(jQuery);​

Working demo on jsFiddle: http://jsfiddle.net/qPbfw/