jPO jPO - 10 days ago 5
CSS Question

Fill space with span besides an image

Hello guys (and girls),

this is the structure I am working with now.



<div class="payment-option clearfix">
<span class="custom-radio pull-xs-left">...</span>
<label style="display:inline;width:100%">
<span style="float:left;">Pay by CashonDelivery</span>
<img style="float:right;" src="http://placehold.it/50x20">
</label>
</div>





The label has set its width to 100% so that it fills the remaining space on the right besides the custom-radio element. That works great. But is it somehow possible to make the span span across the whole width minus the width of the image? Consider the image having variable width.

What I want to achieve with it? I want the radio to be selectable even if the user clicks on the empty space between the text and the picture. Can anybody help me with that?

Answer

I'm not sure what you're asking is possible necessarily with the solution you're requesting, but perhaps this would work. It changes the label to be a position:relative, thus making all "absolute" children be relative to the parent.

I've added borders to the JSFiddle to visualize where the elements are. If you do the same to your original sample code, you'll notice the blue border is just a small strip and doesn't actually encompass the two elements as you might expect.

Your original sample code (with borders): https://jsfiddle.net/af6jfx84/

Fixed code with relative/absolute positioning: https://jsfiddle.net/qj721jyf/

<div class="payment-option clearfix">
  <span class="custom-radio pull-xs-left">...</span>
    <label style="display:block;width:100%;">
      <span style="position:absolute;top:0;left:0;">
        <input type="checkbox" />
        Pay by CashonDelivery
      </span>
      <img style="position:absolute;top:0;right:0;" src="http://placehold.it/50x20">
    </label>
</div>
Comments