Fill remaining width between elements and cut text - css

Question

I have a footer to posts on a blog, the posts are of dynamic with.
There are some elements in the footer that are left-aligned, one that's right-aligned and one between them that should fill the remaining space.
I thought I could use
text-overflow:ellipsis
which works if I set it to a fix width, but at the moment, the space-filling element just gets too large so the last element breaks to a new line.
Adding
white-space:nowrap;
to the outer container didn't help.
Also it'd be a nice bonus if the space-filling element would always fill the remaining space, even if it's content is not large enough.
Here is my fiddle http://jsfiddle.net/MFxk5/ , the space-filling element is the
<a href="c" class="c">...
Thanks to everyone for helping out! Maybe some will mark this as duplicate, but I think the combination with text-overflow:ellipsis makes this unique - I really searched for a solution.

Answer 1

Sounds like you want a fixed-fluid-fixed layout here is how you do it in pure css. If its not what you mean let me know. a Fiddle to view: http://jsfiddle.net/rE2NC/ just move the viewport left and right and you will see how the middle expands contracts as the width does.
HTML
<div class="FooterContainer">
<div class="Footer">
<div class="Left">Left</div>
<div class="Middle">Middle</div>
<div class="Right">Right</div>
</div>
</div>
CSS
.FooterContainer {
width:100%;
}
.Footer {
padding-left:200px; //or whatever width you want the .Left to be
padding-right:200px; //or whatever width you want the .Right to be
}
.Left {
width:200px; //Should match the padding-left of .Footer
margin-left:-200px; //Should be the negative of the width
float:left;
}
.Right {
width:200px; //Should match the padding-right of .Footer
margin-right:-200px; //Should be the negative of the width
float:left;
}
.Middle {
width:100%; //This fills the rest
float:left;
overflow:hidden; //use this to make sure text dont flow out
}

Answer 2

jQuery Solution
I started with a jQuery assisted solution.
The CSS looks like:
div {
width: 100%;
overflow: auto;
}
a {
border: 1px solid gray;
margin: 3px;
height: 50px;
float: left;
}
.c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d {
float: right;
}
and the jQuery function:
$("div").each(function(){
var innerWidth = 0;
$(this).find("a").not(".flex").each(function(){
innerWidth += $(this).outerWidth(true);
});
var flexWidth = $(this).width() - innerWidth - 9; /* padding + border + 1 */
$(this).find(".flex").width(flexWidth);
});
There is a hard coded constant that represents the left/right padding and border on the flexible with div (a.c in your example), and for some reason, there is a 1px adjustment to keep the floats on a single line. (Not quite sure the origin...).
Fiddle: http://jsfiddle.net/audetwebdesign/HmvsN/
Mix of Fixed Widths with Floats
I made a slight adjustment to the HTML as follows (move a.d in front of a.c):
<div class="ex2">
First column
Second column
Last column
Very long text...
</div>
and use the following CSS:
.ex2 a {
border: 1px solid gray;
margin: 3px;
height: 50px;
}
.ex2 .a {
width: 90px;
float: left;
}
.ex2 .b {
width: 90px;
float: left;
}
.ex2 .c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
margin: 3px 100px 3px 199px;
}
.ex2 .d {
width: 90px;
float: right;
}
Essentially, float the left two elements and the right one such that it wraps around the wider one. The width of the wider element has left/right margins to accommodate the floated elements.
Overall, both approaches have merit, but it seems to be a lot of work for what we are getting...