First
&nb...">
Have Geek Brain

Float div filling all empty field

I have html and css like this.

    <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 enter a ".text" width of 150px - 22px. Fill in any empty space between the two floats. I did it with jQuery, but I think this is 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);
        });
0


a source to share


3 answers


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

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

Note: There is a non-expanding space (nbsp) in the arrow div, but it is not shown by the code decoder.



Now you can apply css like this:

.selected { 
    width: 150px; 
}

.selected .text {}

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


a source


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


a source


From looking at what you are doing, it seems to me that you might be better off just using a table and then a div.

Remember, I am assuming that your text items will be displayed as a vertical list, and then you would call 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 be 150 to 22 wide. If you choose to jump to 200, copyCol will scale to 200-22.

-1


a source






More articles:


All Articles