A layout with one fixed width column, one fluid one that stretches to fill empty space, and one fluid that is as wide as it's content

Question

I need to make three columns, one of them needs to be fixed width, one needs to be fluid to fill up empty space, and one needs to be fluid, but to have the combined fixed width of its children (they don't have to be inline, I just wrote the code to make my question more clear).

The div that the three columns will sit in, has a variable width, and all the empty extra space has to go to just the one column with an input inside it (that also has to stretch to fill that columns width, but once the column works, that won't be a problem).

Here's my code, the right column has to keep the width of it's three containing boxes:

.container {
    width: 100%;
    display: table;
    vertical-align: top;
}

.col_left {
    width: 100px;
    display: table-cell;
    background: #708A91;
}

.col_mid {
    display: table-cell;
}

.col_mid input {
    width: 100%;
}

.col_right {
    display: table-cell;
    background: #708A91;
}

.col_right .element_with_variable_width {
    padding: 10px
}

.inline_box {
    display: inline-block;
    vertical-align:  top;
    height:19px;
    width: 30px;
    margin: 0 5px;
    background-color: #E066FF;
}

<div class="container">
    <div class="col_left"></div>
    <div class="col_mid">
        <input type="text">
    </div>
    <div class="col_right">
        <span class="element_with_variable_width">
            <span class="inline_box"></span>
            <span class="inline_box"></span>
            <span class="inline_box"></span>
        </span>
    </div>
</div>

Any ideas? Can this be done with CSS alone?

You should look at `display:flex` in CSS (http://stackoverflow.com/questions/27090585/equal-height-flexbox-columns-in-chrome) — FBHY, Oct 14 '15 at 14:11
Oh, forgot to mention it has to run in IE 9 as well. But thanks, didn't know about flex. — Ioan-Radu Tanasescu, Oct 14 '15 at 14:13
Just to point you in the right direction, you can do this with PHP or Javascript. I can't think of a legacy way of doing this with CSS. — Jesse Dockett, Oct 14 '15 at 14:17
That's what I thought, I could use this old trick: http://alistapart.com/article/holygrail combined with JS to determine the width of the columns with variable text in them. Was hoping for a cleaner way :) but thank you! — Ioan-Radu Tanasescu, Oct 14 '15 at 14:20
Ie9 ? so display : table ... but what is your html and what have you tried so far ? It can be done via CSS only of course ... — G-Cyrillus, Oct 14 '15 at 14:26
No HTML yet, I'm exploring options. But it would be something like this:

Fixed widh

This has to take up all existing space in "container"

this stretches to fit one word text — Ioan-Radu Tanasescu, Oct 14 '15 at 14:28
Sorry, looks like you look for someone to do your job :) . This is a question that comes back often and this for years. You should find many answers to this ;) — G-Cyrillus, Oct 14 '15 at 14:29
I don't want code, just an idea, I have not been able to find anything about this, looks like bootstrap might be able to do it, and I will try to figure out how it does it if it works. Are you sure it's a recurrent question? Tree fluid columns, one expanding to fill the space of the container, two only expanding according to their content? — Ioan-Radu Tanasescu, Oct 14 '15 at 14:39
I wrote a code idea: https://jsfiddle.net/93mghhkb/ it works, only both columns with no width stretch to fill the empty space, not just the middle one. Can I somehow force the right one to not stretch when the container stretches? — Ioan-Radu Tanasescu, Oct 14 '15 at 15:02

Ioan-Radu Tanasescu · Answer 1 · 2015-10-15T08:35:14.893

So the key with display: table; and display: table-cell; is for both left and right columns to have their widths dictated by their content, white-space: nowrap; allows inline columns to not be pushed down by the width: 100%; middle column.

It's a working answer, and display: table; is not evil: http://colintoh.com/blog/display-table-anti-hero

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    display: table;
    vertical-align: top;
}

.col_left {
    display: table-cell;
    background: #708A91;
}

.col_mid {
    display: table-cell;
    width: 100%;
}

.col_mid input {
    width: 100%;
}

.col_right {
    display: table-cell;
    background: #708A91;
    white-space: nowrap;
}

.logo {
    display: inline-block;
    vertical-align:  top;
    width: 100px;
    height:19px;
}

.inline_box {
    display: inline-block;
    vertical-align:  top;
    height:19px;
    width: 30px;
    margin: 0 5px;
    background-color: #E066FF;
}

<div class="container">
    <div class="col_left">
        <span class="logo"></span>
    </div>
    <div class="col_mid">
        <input type="text">
    </div>
    <div class="col_right">
        <span class="inline_box"></span>
        <span class="inline_box"></span>
        <span class="inline_box"></span>
    </div>
</div>

A layout with one fixed width column, one fluid one that stretches to fill empty space, and one fluid that is as wide as it's content

1 Answers1