How do I structure my HTML to give priority to a specific divs width over another div?

Question

I need to create the following layout:

+--------+----------------------------------+-----------+
|  fixed |  variable         | variable     |   fixed   |
|  width |   width - p2      |  width - p1  |   width   |
+--------+-------------------+--------------+-----------+

Where the two middle boxes, with their variable widths have the priority p1 > p2. The content in these two boxes will never result in two lines of text (vertically) as the p2 box will use elipsis when the text is too wide for the box.

More ascii art examples!

+--------+----------------------------------+-----------+
| <img/> | A person @ A Location     |Today |   Accept  |
+--------+----------------------------------+-----------+

+--------+----------------------------------+-----------+
| <img/> | A person @ A Location w...|Today |   Accept  |
+--------+----------------------------------+-----------+

+--------+----------------------------------+-----------+
| <img/> | A person @ A ...|Yesterday @ 3pm |   Accept  |
+--------+----------------------------------+-----------+

So you'll see the "p2" box grows (there will be a maximum width) and the "p1" box shrinks to accomodate the width increase.

I really wish CSS permitted dimensions to be expressed as equations using jquery-esque traversal and css selectors! i.e.

.style {
   width: $(this).parent.width - $('other_div).width ;
}

I am completely amenable to having this layout done in tables if it is easier to accomplish, i.e. if it requires less/no per-browser tweaking.

Cheers,

mike

UPDATE Ideally I'd like this to not require any javascript.

Answer 1

Is this what you were after?

        <script type="text/javascript">
$(document).ready(function() {
    $(".col2").each(function () {
        $(this).width($(this).parent().width() - $(this).next().width() - 10);
    });
});
        </script>
        <div class="row">
            <span class="col1">...</span>
            <span style="display: inline-block; width: 400px;">
                <span class="col2" style="display: inline-block; overflow: hidden;">123456789012345678901234567890123456789012345678901234567890</span>
                <span class="col3">Higher priority text.</span>
            </span>
            <span class="col4">...</span>
        </div>

The only class that is necessary is "col2", I only added the others to try and match your question. The extra 10 pixels I'm taking off the width is to deal with the space between the 2 centre spans, adjust as you see fit.

Answer 2

you can write the width directly to the elements with jquery as MattMS described, or i'd also recommend looking into less css, a css processor that allows you to use variables and do operations like this directly in your stylesheets.

Answer 3

This uses only CSS. The classes are not used and only there to match the question.

    <div class="row">
        <span class="col1">...</span>
        <span style="display: inline-block; position: relative; width: 400px;">
            <span class="col2" style="display: inline-block; width: 400px; overflow: hidden;">123456789012345678901234567890123456789012345678901234567890</span>
            <span class="col3" style="display: inline-block; position: absolute; top: 0px; right: 0px; background-color: #fff;">Higher priority text.</span>
        </span>
        <span class="col4">...</span>
    </div>

This doesn't resize col2 but it will draw over it, so it might not be ideal. Also, it may need a between each row.