Home/ Questions/Q 1018829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T10:55:01+00:00

I need to create the following layout: +——–+———————————-+———–+ | fixed | variable | variable

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0