text-overflow floating divs inside div inside resizable div

Question

Inside of a jquery resizable div I have a number of row divs, and in each row there is a left and right floated div. I would like the left floated divs to use text-overflow:ellipsis when the resizable div is smaller than the two floating divs. The right floated dive should stay the same size. I tried giving the left div a right margin, as suggested in another question, but that seems to ignore the size of the resizable div.

Here is an example of my goal:

Full size row:

left div       right div

Row resized to smaller width:

lef... right div

html:

<div resizable>
    <div class="row">
        <div class="floatleft">test1 hello</div>
        <div class="floatright">test2 hello</div>
    </div>
    <div class="row">
        <div class="floatleft">test3 hello</div>
        <div class="floatright">test4 hello</div>
    </div>
</div>

css:

div[resizable] {
    border: 1px solid Black;
    width: 50%;
}

.floatleft {
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.floatright {
    float: right;
    white-space: nowrap;
}

.row {
    overflow: hidden;
}

Fiddle (uses angularjs but don't worry about that):

http://jsfiddle.net/dfjrp8h5/1/

bonus points if you can explain why the floating div right margin doesn't work. Thanks!

Answer 1

Why you float:left left <div>? First in code must be right <div> with float:right. Left block must have overflow:hidden for clearing.

HTML:

<div resizable>
    <div class="row">
        <div class="floatright">test2 hello</div>
        <div class="floatleft">test1 hello</div>
    </div>
    <div class="row">
        <div class="floatright">test4 hello</div>
        <div class="floatleft">test3 hello</div>
    </div>
</div>

CSS:

.floatleft {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floatright {
    float: right;
    white-space: nowrap;
    margin-left:10px;
}

DEMO

margin-right in floating <div> work fine.