CODEWITHSUNDEEP
htmlcss
squarebrackets
squarebrackets

Reputation: 997

Full width span floating to right

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:

good

This is how it shold not look like:

bad

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;
}

Upvotes: 0

Views: 450

Answers (5)

ShibinRagh
ShibinRagh

Reputation: 6646

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();   
});

Upvotes: 0

squarebrackets
squarebrackets

Reputation: 997

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;
}

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

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.

Upvotes: 0

Pavlo
Pavlo

Reputation: 44899

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 */
}

Upvotes: 1

painotpi
painotpi

Reputation: 6996

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.

Upvotes: 0

Related Questions