Full width span floating to right - html

Question

i wonder how it is possible to have multiple spans inside a div, with the last span floating to the bottom right and taking all the remaining width in the "row".
Here is a fiddle: http://jsfiddle.net/gpakL/
The problem is, that the fullWidth span is not always at the bottom. You can resize your browser window to see the fullWidth span moving.
This is how it should look like:
This is how it shold not look like:
HTML:
<div class="container">
<span class="item">sdfdsfsdf</span>
<span class="item">sdfsdfsdfsdf</span>
<span class="item">dsfdsfdsfsd</span>
<span class="item">fsdfsdfsdffsdf</span>
<span class="item">dsgsdf</span>
<span class="item">dfd</span>
<span class="item">fdfdf</span>
<span class="itemFullWidth">FullWidth</span>
</div>
CSS:
.container {
background-color: blue;
width: 50%;
}
.item {
float: left;
background-color: orange;
height: 30px;
line-height: 30px; /* Vertically center */
margin: 5px;
}
.itemFullWidth {
background-color:green;
display: block;
overflow: hidden;
height: 30px;
line-height: 30px; /* Vertically center */
margin: 5px;
min-width: 80px;
}

Answer 1

If you open to use flexbox, it could be easily done (WebKit demo):
.container {
display: flex;
flex-wrap: wrap; /* allow multiple rows */
}
.container > :last-child {
flex: 1; /* absorb remaining space */
}

Answer 2

check this,
Using position: relative; for the container and position: absolute; for the
.itemFullWidth, you can get it to work to some extent. You'll need some js I guess.

Answer 3

You could consider a JavaScript/jQuery assisted solution for this problem. In a more general case, there are jQuery packages like David DeSandro's Masonry or Packery or Isotope: http://desandro.com/
Here is my version of how you could do this using jQuery.
function resetEndItemWidth() {
var wContainer = $(".container").width();
var minWidthEndItem = parseInt($(".itemFullWidth").css("min-width"));
var endItemMargins = $(".itemFullWidth").outerWidth(true)
- $(".itemFullWidth").outerWidth();
var prevItemOffset = $(".itemFullWidth").prev().offset();
var prevItemWidth = $(".itemFullWidth").prev().outerWidth(true);
var freeWidth = wContainer - (prevItemWidth + prevItemOffset.left);
if (freeWidth < minWidthEndItem) {
newWidth = wContainer - endItemMargins;
} else {
newWidth = Math.max(minWidthEndItem,freeWidth);
}
$(".itemFullWidth").width(newWidth);
}
resetEndItemWidth();
$(window).resize(function(){resetEndItemWidth();});
See the demo at: http://jsfiddle.net/audetwebdesign/m6bx8/
How This Works
I look at the floated sibling before the last item (.itemFullWidth) and determine the amount of free space remaining on the line.
If there is enough free space, I reset the width of the full width item to fill the gap,
otherwise, the full width item is on a separate line and I set it to the width of the parent container.
For full width item (.endItemMargins), you need to account for the left-right margins and you need to get the minimum width from the min-width property.
The min-width requirement could be relaxed if you initialize the original with of the full width item.
Other Comments
The flex box solution is much more elegant. However, it is good to have some options.

Answer 4

Simple jQuery solution, however CSS solutions should be preferred over JS solutions.
http://jsfiddle.net/A8mSu/
HTML:
<div class="container clearfix">
<span class="item">sdfdsfsdf</span>
<span class="item">sdfsdfsdfsdf</span>
<span class="item">dsfdsfdsfsd</span>
<span class="item">fsdfsdfsdffsdf</span>
<span class="item">dsgsdf</span>
<span class="item">dfd</span>
<span class="item">fdfdf</span>
<span class="item itemFullWidth">FullWidth</span>
</div>
JS:
function setWidth()
{
$obj = $('.container .itemFullWidth');
$obj.width('auto').width($obj.parent().width() - $obj.position().left);
}
$(window).resize(setWidth);
$(document).ready(setWidth);
CSS:
.container {
background-color: blue;
width: 50%;
}
.item {
float: left;
background-color: orange;
height: 30px;
line-height: 30px; /* Vertically center */
margin: 5px;
}
.itemFullWidth {
background-color: green;
min-width: 80px;
margin-right: 0;
}
.clearfix:after {
content:"";
display: table;
clear: both;
}

Answer 5

try , Please Checkout http://jsfiddle.net/gpakL/14/
function findWidth (){
var ConWidth = $('.container').width();
var leftWidth = $('.container .item:last').offset().left
var lastItemWidth = $('.container .item:last').width();
var fixPos = ConWidth - (leftWidth + lastItemWidth)
$('.container .itemFullWidth').width( fixPos -20 );
};
$(document).ready(function(){
findWidth();
});
$(window).resize(function(){
findWidth();
});