100% width with div displayed as table-cell

Question

I have been trying to figure out how to format a list that has elements (in my case buttons) on the sides. The major problem that I have had is that I do not want the list text to wrap around the buttons, I want it to behave more like a table; text should not wrap into other columns. To complicate things a little further, I do not necessarily know the sizes of the 'Side Elements' in advance.

This is the code I came up with:

<div style='display: table;'>
    <div style='display: table-row;'>
        <div style='display: table-cell'>
            <!--- Variable Width Left Side Element --->
        </div>
        <div style='display: table-cell; width: 100%;'>
            List Text
        </div>
        <div style='display: table-cell'>
            <!--- Variable Width Right Side Element --->
        </div>
    </div>
</div>

JSFiddle

I have tried this on Firefox, Chrome, Safari and Internet Explorer and it seems to work fine. However, I am still concerned because I do not entirely understand why this works (and I do not like using code that I do not understand). My concern is with width: 100% . Shouldn't this specify that the cell should take up the entire parent, rather than all the space available in that row?

Ultimately, my question is this: Can I trust using width: 100% like this? Is this an appropriate way of solving my problem?

Answer 1

Ultimately, my question is this: Can I trust using width: 100% like this? Is this an appropriate way of solving my problem?

Yes, you can.

Tables are funny that way...when a cell is given a width of 100% it just means take up as much space as you can out of what is left .

So you've already allocated some of the 100% of the parent so the middle div just grabs what's left.

---

For what it's worth...a `flex-box alternative:

 .row { display: flex; margin-bottom: .5em; } .row div { padding-left: 5px; padding-right: 5px; } .row div:first-child { flex-basis: 55px; } .row div:nth-child(2) { flex: 1; } .row div:last-child { flex-basis: 35px; }

 <div class="container"> <div class="row"> <div style="background-color: red"></div> <div>This text is not too long</div> <div style='background-color: blue'></div> </div> <div class="row"> <div style='background-color: red'></div> <div>This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long.</div> <div style='background-color: blue'></div> </div> </div>

JSfiddle Demo

Answer 2

when you are mixing both absolute and relative measurements, its good to use calc() function. So the width of the middle element will be,

width: calc(100% - 90px) 100% being the full width of parent and 90px being the absolute measurements with you are excluding ( 55px + 35px ).

Browser will automatically compute the actual width of the element based on the parent width (which is the available width minus 90px). Directly giving 100% is not the correct way, imho.

Answer 3

The width of a table-cell depends upon its content. The cells will expand based on their content unless table-layout: fixed is given on the table.

Instead of using tables you can use floats for example follow this link http://jsfiddle.net/osha90/e57dja5u/

<div >
<div class="clearfix" style="margin:10px 0px">

    <div style='width: 55px; height: 35px; background-color: red;float:left'>
    </div>
     <div style='width: 35px; height: 25px; background-color: blue;float:right'>
        </div>
    <div style="overflow:hidden;">
        This text is not too long
    </div>

</div>
<div class="clearfix">

    <div style='width: 55px; height: 35px; background-color: red;float:left'>
    </div>
     <div style='width: 35px; height: 25px; background-color: blue;float:right'>
        </div>
    <div style="overflow:hidden;">
        This text is very long. This text is very long. This text is very       long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long.
    </div>

</div>

.clearfix:after,.clearfix:before{
   content: "";
   clear: both;
   display: block;
}

Answer 4

Because table rows can't wrap, table cell with 100% width will force the cell to occupy as much space as he can. You other two cell have fixed width, because their content have a fixed width, and the a table cell minimum width is the one required to display the content. This means that the 100% width actual width is 100% - the two fixed cell.