got this one working, maybe this is what you meant. jsfiddle
Edited the html structure
a bit
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/
Solution
OTHER TIPS
This is roughly a solution, you can vary the amount of text displayed in the heading by altering the max-width of the h2.
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:
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; }