Float div that fills all empty space of box

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

From the looks at what you're doing, it looks to me that you might be better off just using a table then a div.

Mind you, I'm assuming your text items will be displayed as a vertical list, then you would code it as such.

<style>

#list
{
  width:150px;
  padding:0px; /*set this to what ever you want*/
}

td.arrowCol
{
  width:22px
}

td.arrowCol img
{
   float:right;
}

</style>

<table id="list" >
    <tr>
       <td id="copyCol" >
          first
       </td>
       <td id="arrowCol" >
          <img src="arrow.gif" />
       </td>
    </tr>
</table>

The copyCol column will automatically have the width of 150 - 22. If you decide to change to 200, copyCol will scale to 200 - 22.

Answer 2

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

Answer 3

Why use a div just to add a separate background arrow?

<div class="selected with-arrow">
  <div class="text"></div>
</div>

.with-arrow .text { background: url(dropdown_text.png); }
.with-arrow { background: url(dropdown_arrow.png); padding-left:22px; }