Can you make a fluid-width header that doesn't wrap with a fixed-width right sidebar?

Question

I'm afraid it's a bit more complicated than that.

I need a fluid width header (h2) that never wraps, with a left aligned button (.btn1), and all without overlapping a fixed-width right button (.btn2).

If that sounds too complicated, how about a well written Fiddle (http://jsfiddle.net/8ZtU5/) and some beautiful ASCII art?

__________________________________________________
|                                                |
| This header is really really... [One]    [Two] |
|                                                |
--------------------------------------------------
__________________________________________________
|                                                |
| This header is short [One]               [Two] |
|                                                |
--------------------------------------------------
_________________________________
|                               |
| This header is... [One] [Two] |
|                               |
---------------------------------

What do you think? Can you help?

---

HTML: (http://jsfiddle.net/8ZtU5/)

Note: extra wrappers are just for convenience. Nothing is necessary except the rendered result.

<div class="container">
    <div class="fluid-width">
        <div class="no-wrapping">
            <h2>This header is really really really really really really really long</h2>
        </div>
        <button class="btn1">One</button>
    </div>
    <div class="fixed-width">
        <button class="btn2">Two</button>
    </div>
</div>
<div class="container">
    <div class="fluid-width">
        <div class="no-wrapping">
            <h2>This header is short</h2>
        </div>
        <button class="btn1">One</button>
    </div>
    <div class="fixed-width">
        <button class="btn2">Two</button>
    </div>
</div>

Base CSS:

.container {
    margin:20px 0;
    width:100%;
    min-width:300px;
    background:#eee;
}

.fluid-width {
    min-width:200px;
    display:inline-block;
}

.fixed-width {
    width:100px;
    max-width:100px;
    min-width:100px;
    display:inline-block;
}

.no-wrapping {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word;
}
h2 {
    display:inline;
}

No need to guess... it's all on the fiddle if you want to play: http://jsfiddle.net/8ZtU5/

Patio

Answer 1

got this one working, maybe this is what you meant. jsfiddle Edited the html structure a bit

Herewith

Looks pretty good. Thanks for giving it a shot. The only thing I can't figure out is why there is so much margin between btn1 and btn2 on the longer header one. I'd like to see more header if possible. Updated Fiddle: jsfiddle.net/8ZtU5/3 – Patio

Ah, I see now, you included a max-width in the .no-wrapping class. Any idea how to allow this class to fill all the available space? (without setting a width?) – Patio

you can adjust the distance by changing the max-width property inside .no-wrapping class – Herewith

What about this solution Though calc() isn't recommended to use. – Imbecilic

Here's an update to the fiddle, removing extra css and html. jsfiddle.net/8ZtU5/4 I think this might work for me. It's not ideal to use the percentage for the header container, but it's not the end of the world. Thanks for your help. – Patio

Answer 2

This is roughly a solution, you can vary the amount of text displayed in the heading by altering the max-width of the h2.

http://jsfiddle.net/QJg8X/

markup

<div class="container">
    <div class="fluid-width">
        <h2>This header is really really really really really really long</h2>
        <button class="btn1">One</button>
        <button class="btn2">Two</button>
    </div>
</div>
<div class="container">
    <div class="fixed-width">
         <h2>This header is short</h2>
        <button class="btn1">One</button>
        <button class="btn2">Two</button>
    </div>
</div>

css

.container {
    margin:20px 0;
    width:100%;
    min-width:300px;
    background:#eee;
}

.fluid-width {
    display: inline-block;
    overflow: hidden;
    min-width: 200px;
}

.fixed-width {
    display: inline-block;
    overflow: hidden;
    width: 400px;
}

h2 {
    float: left;
    margin: 0;
    padding: 0;
    display: block;
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

button.btn1 { float: left; }
button.btn2 { float: right; }

I've only tested the above with modern browsers however.

Ah.. Rather similar to AzDesign's answer really (+1), save for the fact it's using floats rather than absoute positioning.

update

Another way to approach the same problem is to have a fixed-width region for your buttons, this means a slight alteration in markup but means you don't have to specify a max width:

http://jsfiddle.net/QJg8X/2/

markup

<div class="container">
    <div class="fluid-width">
       <div class="buttons">
            <button class="btn1">One</button>
            <button class="btn2">Two</button>
       </div>
       <h2>This header is really really really really really really long</h2>
    </div>
</div>
<div class="container">
    <div class="fixed-width">
        <div class="buttons">
            <button class="btn1">One</button>
            <button class="btn2">Two</button>
        </div>
        <h2>This header is short</h2>
    </div>
</div>

css

.container {
    margin:20px 0;
    width:100%;
    min-width:300px;
    background:#eee;
}

.fluid-width {
    display: block;
    overflow: hidden;
    min-width: 200px;
}

.fixed-width {
    display: block;
    overflow: hidden;
    width: 400px;
}

h2 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buttons {
    display: block;
    width: 150px;
    float: right;
}

button.btn2 { float: right; }

Berthoud

Thanks for trying. It doesn't flow as nicely as AzDesign's when you drag the fiddle iframe bars. The button on the right (.btn2) (at least in chrome) falls off the right. – Patio

@Patio no worries, Yeah floats seem to get confused when using inline-block which is not something I generally use as it has rather strange behaviour. The second approach may work better however... obviously until you hit your min-width values that is. – Berthoud