Question

I have such html and css.

    <div class="selected">
        <div class="text">First</div>
        <div class="arrow">&nbsp;</div>
    </div>

    .selected { width: 150px; }

    .selected .text { background: url(dropdown_text.png);  float: left; }
    .selected .arrow { background: url(dropdown_arrow.png); width:22px; float: right; }

I need to put in “.text” a width that is 150px – 22px. Fill all empty between two floats. I made it with jQuery, but I think its not the right way.

        $('.selected .text').each(function(i, n) {
            var ctrlwidth = $(n).parents('.selected').width();
            var arrowidth = $(n).parent().find('.arrow').width();

            $(n).width(ctrlwidth - arrowidth);
        });

Answer 1

You can achieve the desired effect easily in css only, if you modify the html slightly:

<div class="selected">
<div class="arrow">&nbsp;</div>
    <div class="text">First</div>
</div>

Note: there is a non breaking space (nbsp) inside the arrow div, but it it not shown by the code beautifier.

Now you can apply the css like this:

.selected { 
    width: 150px; 
}

.selected .text {}

.selected .arrow {
    float:right;
    width:22px;
}